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-content: stretch | center | flex-start | flex-end | space-between | space-around | 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>

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>

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>

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>

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: baselne; 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>

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.

Related Resources

Align-content, align-self, border, width, height, padding, color.

How to Vertically Center text with CSS




Related articles