Align-self

CSS align-self property is used to align the selected item inside current flex line and override align-items value.

CSS align-self property will be ignored, if any of flex item's vertical margin is set to auto.

The align-self property accepts the same values as the align-items:

  • stretch
  • flex-start
  • center
  • flex-end
  • baseline

CSS Syntax

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

Let's see an example:

<!DOCTYPE html>
<html>
  <head>
    <style>
      #example {
        width: 220px;
        height: 300px;
        padding: 0;
        border: 1px solid black;
        display: -webkit-flex; /* Safari */
        -webkit-align-items: flex-start; /* Safari 7.0+ */
        display: flex;
        align-items: flex-end;
      }
      #example li {
        -webkit-flex: 1; /* Safari 6.1+ */
        flex: 1;
        list-style: none;
      }
      #blue {
        -webkit-align-self: center; /* Safari 7.0+ */
        align-self: flex-start;
      }
    </style>
  </head>
  <body>
    <ul id="example">
      <li style="background-color:#8ebf42;">GREEN</li>
      <li style="background-color:#1c87c9;" id="blue">BLUE</li>
      <li style="background-color:yellow;">We can place more content in Yellow area</li>
    </ul>
  </body>
</html>

Here the result is:


Property Values

Value Descriptions
flex-start Items are placed at the beginning of the container.
flex-end Items are placed at the end of the container.
center Items are placed at the center of the container.
baseline Items are placed at the baseline of the container.
stretch This value makes items stretch to fit the container.
auto It inherits its parent container's align-items property or stretch it if there is no parent container.It is the default value for this property.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.