X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

CSS align-items Property

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
Initial Value stretch
Applies to All elements.
Inherited No.
Animatable No.
Version CSS3
DOM Syntax object.style.alignItems = "center";

Syntax

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

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #example {
      width: 220px;
      height: 300px;
      padding: 0;
      border: 1px solid #000;
      display: -webkit-flex; /* Safari */
      -webkit-align-items: stretch; /* Safari 7.0+ */
      display: flex;
      align-items: stretch;
      }
      #example li {
      -webkit-flex: 1; /* Safari 6.1+ */
      flex: 1;
      list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-items: stretch; example</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;">Green</li>
      <li style="background-color:#1c87c9;">Blue</li>
      <li style="background-color:#ccc;">Gray</li>
    </ul>
  </body>
</html>

Result

Example with the "center" value where items are positioned at the center of the container.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      #example {
      width: 220px;
      height: 300px;
      padding: 0;
      border: 1px solid #000;
      display: -webkit-flex; /* Safari */
      -webkit-align-items: center; /* Safari 7.0+ */
      display: flex;
      align-items: center;
      }
      #example li {
      -webkit-flex: 1; /* Safari 6.1+ */
      flex: 1;
      list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-items: center; example</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;">Green</li>
      <li style="background-color:#1c87c9;">Blue</li>
      <li style="background-color:#ccc;">Gray</li>
    </ul>
  </body>
</html>

Result

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

Example

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      #example {
      width: 220px;
      height: 300px;
      padding: 0;
      border: 1px solid #000;
      display: -webkit-flex; /* Safari */
      -webkit-align-items: flex-start; /* Safari 7.0+ */
      display: flex;
      align-items: flex-start;
      }
      #example li {
      -webkit-flex: 1; /* Safari 6.1+ */
      flex: 1;
      list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-items: flex-start; example</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;">Green</li>
      <li style="background-color:#1c87c9;">Blue</li>
      <li style="background-color:#ccc;">Gray</li>
    </ul>
  </body>
</html>

Result

Here we apply the "flex-end" value which places the items at the end of the container.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      #example {
      width: 220px;
      height: 300px;
      padding: 0;
      border: 1px solid #000;
      display: -webkit-flex; /* Safari */
      -webkit-align-items: flex-end; /* Safari 7.0+ */
      display: flex;
      align-items: flex-end;
      }
      #example li {
      -webkit-flex: 1; /* Safari 6.1+ */
      flex: 1;
      list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-items: flex-end; example</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;">Green</li>
      <li style="background-color:#1c87c9;">Blue</li>
      <li style="background-color:#ccc;">Gray</li>
    </ul>
  </body>
</html>

Result

And an example with the last "baseline" value which places the items at the baseline of the container.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      #example {
      width: 220px;
      height: 300px;
      padding: 0;
      border: 1px solid #000;
      display: -webkit-flex; /* Safari */
      -webkit-align-items: baseline; /* Safari 7.0+ */
      display: flex;
      align-items: baseline;
      }
      #example li {
      -webkit-flex: 1; /* Safari 6.1+ */
      flex: 1;
      list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>
    Align-items: baseline; example
    <ul id="example">
      <li style="background-color:#8ebf42;">Green</li>
      <li style="background-color:#1c87c9;">Blue</li>
      <li style="background-color:#ccc;">Gray</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.
baseline Items are positioned at the baseline of the container.
initial It makes the property use its default value.
inherit It 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-items property accepts the following values, except:



Do you find this helpful?

Related articles