CSS align-content Property

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 not affect. It needs multiple lines within a flexible container.

The value "stretch" is this property's default value.

The align-content property accepts the following values:

  • flex-start
  • flex-end
  • center
  • space-between
  • space-around
  • stretch
Initial Value stretch
Applies to Multi-line flex containers.
Inherited No.
Animatable No.
Version CSS3
DOM Syntax object.style.alignContent = "flex-end",

Syntax

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

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <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: stretch; /* Safari 7.0+ */
      display: flex;
      flex-flow: row wrap;
      align-content: stretch;
      }
      #example li {
      width: 70px;
      height: 70px;
      list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-content: stretch; example</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;"></li>
      <li style="background-color:#1c87c9;"></li>
      <li style="background-color:#666;"></li>
    </ul>
  </body>
</html>

Result

Let’s try another example where the "center" value is applied.

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: center; /* Safari 7.0+ */
      display: flex;
      flex-flow: row wrap;
      align-content: center;
      }
      #example li {
      width: 70px;
      height: 70px;
      list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-content: center; example</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;"></li>
      <li style="background-color:#1c87c9;"></li>
      <li style="background-color:#666;"></li>
    </ul>
  </body>
</html>

Result

Example with "flex-start" value where items are place at the beginning.

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: flex-start; /* Safari 7.0+ */
      display: flex;
      flex-flow: row wrap;
      align-content: flex-start;
      }
      #example li {
      width: 70px;
      height: 70px;
      list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-content: flex-start; example</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;"></li>
      <li style="background-color:#1c87c9;"></li>
      <li style="background-color:#666;"></li>
    </ul>
  </body>
</html>

Result

And, example with the "flex-end" where items are placed at the end.

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: flex-end; /* Safari 7.0+ */
      display: flex;
      flex-flow: row wrap;
      align-content: flex-end;
      }
      #example li {
      width: 70px;
      height: 70px;
      list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-content: flex-end; example</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;"></li>
      <li style="background-color:#1c87c9;"></li>
      <li style="background-color:#666;"></li>
    </ul>
  </body>
</html>

Result

Another example where the "space-between" is applied. Items are placed between the lines.

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-between; /* Safari 7.0+ */
      display: flex;
      flex-flow: row wrap;
      align-content: space-between;
      }
      #example li {
      width: 70px;
      height: 70px;
      list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-content: space-between; example</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;"></li>
      <li style="background-color:#1c87c9;"></li>
      <li style="background-color:#666;"></li>
    </ul>
  </body>
</html>

Result

Another example with the "space-around" value. There is equal space between the items.

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: space-around;
      }
      #example li {
      width: 70px;
      height: 70px;
      list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-content: space-around; example</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;"></li>
      <li style="background-color:#1c87c9;"></li>
      <li style="background-color:#666;"></li>
    </ul>
  </body>
</html>

Result

Values

Value Description
stretch Makes items stretch to fit the container. This is the default value for this property.
center Items are placed at the center of the container.
flex-start Items are placed at the beginning of the container.
flex-end Items are placed at the end of the container.
space-between Items are placed between the lines.
space-around Items are distributed with equal space between them.
initial Makes the property use its default value.
inherit Inherits the property from its parents element.

Browser support

29.0+
21-28 -webkit-
12.0+ 28.0+ 9.0+
6.1-8.0 -webkit-
12.1+

Practice Your Knowledge

The align-content property accepts the following values, except:




Related articles