CSS align-items Property

The align-items property aligns, and evenly spaces, items.

The items are arranged inside a flex container.

Example

#

Flex items aligned and evenly spaced around the center of the flex container.

1
2
3
4
5
6
7
8
9
<style>
  .align-items-center {
    background-color: #776fac;
    padding: 5px;
    height: 350px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .align-items-center > div {
    background-color: aliceblue;
    margin: 5px;
    width: 100px;
    line-height: 80px;
    text-align: center;
    font-size: 18px;
  }
</style>

<div class="align-items-center">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

Using align-items

align-items sets the alignment behavior of flex items in a container.

The default is stretch in which all flex items have the same height to fill the container.

Syntax

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

Values

#

Value Description
stretch Default. Stretch items to fit the container
center Position and space items at the center of the container
flex-start Position and space items at the beginning of the container
flex-end Position and space items at the end of the container
baseline Position and space items according their baselines
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see the different align-items values.

1
2
3
4
5
6
7
8
9
<style>
  .flex-box {
    background-color: #776fac;
    padding: 5px;
    height: 350px;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
  }

  .flex-box > div {
    background-color: aliceblue;
    margin: 5px;
    width: 100px;
    line-height: 80px;
    text-align: center;
    font-size: 18px;
  }
</style>

<div class="flex-box">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

Did you know?

Did you know?

Align-items versus align-content

Both properties align items inside a flex container.

align-items spaces items evenly in the container.

align-content aligns items along a flex line.

This image shows the difference with both properties having a value of center.


Browser support

This table shows when align-items support started for each browser.

Chrome
21.0 Jul 2012
Firefox
20.0 Apr 2013
IE/Edge
11.0 Oct 2013
Opera
12.1 Nov 2012
Safari
9.0 Sep 2015

You may also like

Guides