CSS align-self Property

The CSS align-self property defines the alignment for the selected item inside the flexible container.

Demo:

Syntax:

align-self: auto|stretch|center|flex-start|flex-end|baseline;

auto (default) - the element inherits its parent container's align-items property, or "stretch" if it has no parent container.

stretch - the element is positioned to fit the container.

center - the element is positioned at the center of the container.

flex-start - the element is positioned at the beginning of the container.

flex-end - the element is positioned at the end of the container.

baseline - the element is positioned at the baseline of the container.

Example:

<!DOCTYPE html> <html> <head> <style>  #box-content {   width: 200px;   height: 200px;   border: 3px solid #333;   display: flex;   align-items: flex-start; }  .one, .two, .three {   flex: 1; }  .two {   align-self: center; } </style> </head> <body>  <div id="box-content">   <div class="one" style="background-color:#e76f51;">One</div>   <div class="two" style="background-color:#e9c46a;">Three</div>    <div class="three" style="background-color:#2a9d8f;">Third div with more content.</div> </div>  </body> </html>

Output:




One
Three
Third div with more content.



Note: Internet Explorer 10 and earlier versions do not support the align-self property!

Enjoy coding!