Align-items

What is it?

CSS align-items property defines the default alignment for flex items. It is just like justify-content property but vertical version.

The align-items property accepts the following values:

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

CSS Syntax

flex-start | flex-end | center | stretch | baseline | 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: center; /* Safari 7.0+ */
        display: flex;
        align-items: stretch;
      }
      #example li {
        -webkit-flex: 1; /* Safari 6.1+ */
        flex: 1;
        list-style: none;
      }
    </style>
  </head>
  <body>
    <ul id="example">
      <li style="background-color:#8ebf42;">GREEN</li>
      <li style="background-color:#1c87c9;">BLUE</li>
      <li style="background-color:yellow;">We are adding more content here.</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. 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.