Align-content

CSS align-content property is used to align a flex container's lines, when there is available space vertically (on the cross-axis).

When there is only one line in the flexbox, this property will have no effect. It needs multiple lines within flexibale container.

Note that stretch value is align-content property's default value.

The align-content property accepts the following values:

  • stretch
  • flex-start:
  • flex-end
  • center
  • space-between
  • space-around

CSS Syntax

align-content: flex-start | flex-end | center | space-between | space-around | stretch | initial | inherit;

Let's see an example:

<!DOCTYPE html>
<html>
  <head>
    <style>
      #example {
        width: 70px;
        height: 300px;
        padding: 0;
        border: 1px solid #c3c3c3;
        display: -webkit-flex; /* Safari */
        -webkit-flex-flow: row wrap; /* Safari 6.1+ */
        -webkit-align-content: space-around; /* Safari 7.0+ */
        display: flex;
        flex-flow: row wrap;
        align-content: center;
      }
      #example li {
        width: 70px;
        height: 70px;
        list-style: none;
      }
    </style>
  </head>
  <body>
    <ul id="example">
      <li style="background-color:#8ebf42;"></li>
      <li style="background-color:#1c87c9;"></li>
      <li style="background-color:yellow;"></li>
    </ul>
  </body>
</html>

Here the result is:


Property Values

Value Description
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.
space-between Items are placed between the lines.
space-around Items are distributed with equal space between them.
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.