YouTip` elements inside a flex container:
```css
div {
display: flex;
align-items: center;
}
```
---
## Browser Support
The numbers in the table specify the first browser version that fully supports the property. Numbers followed by `-webkit-`, `-ms-`, or `-moz-` specify the first version that supported the property with that prefix.
| Property | Chrome | Edge / IE | Firefox | Safari | Opera |
| :--- | :--- | :--- | :--- | :--- | :--- |
| **align-items** | 21.0 | 11.0 | 20.0 | 9.0
7.0 `-webkit-` | 12.1 | --- ## Definition and Usage The `align-items` property aligns the flex items of a flex container along the current line's cross axis (vertical axis by default, unless `flex-direction` is set to `column`). | Feature | Description | | :--- | :--- | | **Default Value:** | `stretch` | | **Inherited:** | No | | **Animatable:** | No | | **CSS Version:** | CSS3 | | **JavaScript Syntax:** | `object.style.alignItems = "center"` | --- ## CSS Syntax ```css align-items: stretch | center | flex-start | flex-end | baseline | initial | inherit; ``` ### Property Values | Value | Description | | :--- | :--- | | **`stretch`** | **Default value.** Items are stretched to fit the container. If the cross-size property (e.g., `height` or `width`) of an item is set to `auto`, its value will be resolved to stretch the item's margin box as close to the line's cross-size as possible, while still respecting `min/max-width/height` constraints. | | **`center`** | Items are centered along the cross axis. If the cross-size of the line is smaller than the item's cross-size, it will overflow equally in both directions. | | **`flex-start`** | Items are aligned to the start of the cross axis. The cross-start margin edge of the flex items is flushed against the cross-start edge of the line. | | **`flex-end`** | Items are aligned to the end of the cross axis. The cross-end margin edge of the flex items is flushed against the cross-end edge of the line. | | **`baseline`** | Items are aligned such that their baselines align. If the flex item's inline axis is parallel to the cross axis, this value is equivalent to `flex-start`. Otherwise, it participates in baseline alignment. | | **`initial`** | Sets this property to its default value (`stretch`). | | **`inherit`** | Inherits this property from its parent element. | --- ## Code Examples and Visualizations To better understand how `align-items` behaves, consider a flex container with a default horizontal main axis (`flex-direction: row`): ### 1. Center Alignment (`center`) Aligns items in the middle of the cross axis. This is highly useful for vertical centering. ```css .container { display: flex; align-items: center; height: 200px; border: 1px solid #ccc; } ``` ### 2. Stretch (Default) If the items do not have a specified height (or width, if `flex-direction` is `column`), they will stretch to fill the container. ```css .container { display: flex; align-items: stretch; height: 200px; } ``` ### 3. Baseline Alignment (`baseline`) Aligns items based on their text baselines. This is particularly useful when child elements have different font sizes but need to look aligned textually. ```css .container { display: flex; align-items: baseline; } ``` --- ## Key Considerations 1. **Main Axis vs. Cross Axis:** The behavior of `align-items` depends on the `flex-direction` property: * If `flex-direction` is `row` (default), the cross axis runs vertically. `align-items` controls vertical alignment. * If `flex-direction` is `column`, the cross axis runs horizontally. `align-items` controls horizontal alignment. 2. **`align-items` vs. `align-content`:** * `align-items` aligns individual items within a single line of a flex container. * `align-content` aligns the lines themselves within a multi-line flex container (only works when `flex-wrap: wrap` is enabled and there are multiple lines of items). --- ## Related Properties * CSS Reference: [`align-content`](css3-pr-align-content.html) - Aligns a flex container's lines when there is extra space in the cross-axis. * CSS Reference: [`align-self`](css3-pr-align-self.html) - Allows the default alignment (specified by `align-items`) to be overridden for individual flex items.
7.0 `-webkit-` | 12.1 | --- ## Definition and Usage The `align-items` property aligns the flex items of a flex container along the current line's cross axis (vertical axis by default, unless `flex-direction` is set to `column`). | Feature | Description | | :--- | :--- | | **Default Value:** | `stretch` | | **Inherited:** | No | | **Animatable:** | No | | **CSS Version:** | CSS3 | | **JavaScript Syntax:** | `object.style.alignItems = "center"` | --- ## CSS Syntax ```css align-items: stretch | center | flex-start | flex-end | baseline | initial | inherit; ``` ### Property Values | Value | Description | | :--- | :--- | | **`stretch`** | **Default value.** Items are stretched to fit the container. If the cross-size property (e.g., `height` or `width`) of an item is set to `auto`, its value will be resolved to stretch the item's margin box as close to the line's cross-size as possible, while still respecting `min/max-width/height` constraints. | | **`center`** | Items are centered along the cross axis. If the cross-size of the line is smaller than the item's cross-size, it will overflow equally in both directions. | | **`flex-start`** | Items are aligned to the start of the cross axis. The cross-start margin edge of the flex items is flushed against the cross-start edge of the line. | | **`flex-end`** | Items are aligned to the end of the cross axis. The cross-end margin edge of the flex items is flushed against the cross-end edge of the line. | | **`baseline`** | Items are aligned such that their baselines align. If the flex item's inline axis is parallel to the cross axis, this value is equivalent to `flex-start`. Otherwise, it participates in baseline alignment. | | **`initial`** | Sets this property to its default value (`stretch`). | | **`inherit`** | Inherits this property from its parent element. | --- ## Code Examples and Visualizations To better understand how `align-items` behaves, consider a flex container with a default horizontal main axis (`flex-direction: row`): ### 1. Center Alignment (`center`) Aligns items in the middle of the cross axis. This is highly useful for vertical centering. ```css .container { display: flex; align-items: center; height: 200px; border: 1px solid #ccc; } ``` ### 2. Stretch (Default) If the items do not have a specified height (or width, if `flex-direction` is `column`), they will stretch to fill the container. ```css .container { display: flex; align-items: stretch; height: 200px; } ``` ### 3. Baseline Alignment (`baseline`) Aligns items based on their text baselines. This is particularly useful when child elements have different font sizes but need to look aligned textually. ```css .container { display: flex; align-items: baseline; } ``` --- ## Key Considerations 1. **Main Axis vs. Cross Axis:** The behavior of `align-items` depends on the `flex-direction` property: * If `flex-direction` is `row` (default), the cross axis runs vertically. `align-items` controls vertical alignment. * If `flex-direction` is `column`, the cross axis runs horizontally. `align-items` controls horizontal alignment. 2. **`align-items` vs. `align-content`:** * `align-items` aligns individual items within a single line of a flex container. * `align-content` aligns the lines themselves within a multi-line flex container (only works when `flex-wrap: wrap` is enabled and there are multiple lines of items). --- ## Related Properties * CSS Reference: [`align-content`](css3-pr-align-content.html) - Aligns a flex container's lines when there is extra space in the cross-axis. * CSS Reference: [`align-self`](css3-pr-align-self.html) - Allows the default alignment (specified by `align-items`) to be overridden for individual flex items.