The align-items property aligns, and evenly spaces, items.
The items are arranged inside a flex container.
Flex items aligned and evenly spaced around the center of the flex container.
<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>
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.
align-items: stretch | center | flex-start |
flex-end | baseline | initial | inherit;
| 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. |
Click the buttons to see the different align-items values.
<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>
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.
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 |
