align-items
Specifies how items are aligned along the cross axis of a flex container. For 'flex-direction: row', this controls vertical alignment; for 'column', it controls horizontal alignment.
Sample Code
style.css
/* Stretch to fill the container height (default) */
.container { display: flex; align-items: stretch;}
/* Align to top */
.container-start { display: flex; align-items: flex-start;}
/* Center alignment */
.container-center { display: flex; align-items: center;}
/* Align to bottom */
.container-end { display: flex; align-items: flex-end;}
/* Align to text baseline */
.container-base { display: flex; align-items: baseline;}
Available Values
| Value | Description |
|---|---|
| stretch | Stretches items to fill the full extent of the container along the cross axis. This is the initial value. |
| flex-start | Aligns items to the start of the cross axis. |
| flex-end | Aligns items to the end of the cross axis. |
| center | Centers items along the cross axis. |
| baseline | Aligns items to the text baseline (the bottom edge of characters) within the items. |
Specification
| Property | Details |
|---|---|
| Initial Value | stretch |
| Applies to | Flex containers (elements with 'display: flex' or 'display: inline-flex') |
| Inherited | No |
| Animation | Not animatable (discrete) |
Browser Support
Chrome29 + ○
28 △27 △26 △25 △24 △23 △22 △21 △20 and earlier ×
Firefox20 + ○
19 and earlier ×
Safari9 + ○8 △
7 △6 and earlier ×
Edge12 + ○
IE11 ○10 ×9 ×
8 ×7 ×
6 ×
Opera16 + ○15 △
14 and earlier ×
iOS Safari9 + ○8 △7 △6 and earlier ×
Android Browser4.4 + ○3 and earlier × Chrome AndroidLatest ○ Firefox AndroidLatest ○Description
The 'align-items' property is specified on a flex container to control item alignment along the cross axis (vertical when 'flex-direction: row'). The 'justify-content' property handles the main axis, while 'align-items' handles the cross axis.
Visual Layout of Each Value
stretch (Initial Value)
When an item has no explicit size specified (no 'height' or 'width'), it is stretched to fill the full extent of the container along the cross axis. Because this is the initial value, simply setting 'display: flex' causes all items to share equal heights — that is the effect of this property. If an item has an explicit size specified, it will not be stretched even with 'stretch'.
center
Centers items along the cross axis. Combining it with 'justify-content: center' achieves perfect centering in all directions. This is one of the most representative uses of Flexbox.
/* Perfect centering in all directions */
.perfect-center {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
baseline
Aligns items to the baseline of the text (the bottom edge of the characters) within each item. Use this when you have a mix of items with different font sizes and want their text positions to align naturally.
/* Align text positions of elements with different font sizes */
.nav {
display: flex;
align-items: baseline;
}
.nav-title { font-size: 24px;}
.nav-link { font-size: 14px;}
Changing Alignment for Individual Items
To change the cross-axis alignment for a specific item only, use the 'align-self' property on that item. The 'align-items' property is a bulk setting for the entire container, while 'align-self' is for individual items.
.container {
display: flex;
align-items: flex-start; /* All items align to top */
}
.special-item {
align-self: flex-end; /* Only this item aligns to bottom */
}
Related Properties
| Property | Description |
|---|---|
| justify-content | Controls item alignment along the main axis. Can be combined with 'align-items' to control alignment in all directions. |
| align-self | Specifies the cross-axis alignment for individual items. Overrides 'align-items'. |
| align-content | Controls row spacing when there are multiple lines. 'align-items' handles item alignment within a row, while 'align-content' handles the positioning of all rows. |
| flex-direction | Specifies the direction of the main axis. The direction in which 'align-items' takes effect changes depending on the value of this property. |
If you find any errors or copyright issues, please contact us.
シェアする