CSS align-self

Previous Next

Demo of the different values of the align-self property.

Click the property values below to see the result:

align-self: stretch;
align-self: center;
align-self: flex-start;
align-self: flex-end;
align-self: baseline;
This DIV has little content.
This DIV has more content and usually this can be a problem when aligning multiple DIV elements.
This
DIV
has
many
line
breaks.
This DIV has little content.
This DIV has more content and usually this can be a problem when aligning multiple DIV elements.
This
DIV
has
many
line
breaks.
This DIV has little content.
This DIV has more content and usually this can be a problem when aligning multiple DIV elements.
This
DIV
has
many
line
breaks.
This DIV has little content.
This DIV has more content and usually this can be a problem when aligning multiple DIV elements.
This
DIV
has
many
line
breaks.
This DIV has little content.
This DIV has more content and usually this can be a problem when aligning multiple DIV elements.
This
DIV
has
many
line
breaks.

Play more with the code in our Tryit yourself editor: Try it Yourself ❯