YouTip

## CSS `align-content` Property The `align-content` property aligns a flex container's lines within the container when there is extra space in the cross-axis (vertically, if the main axis is horizontal). --- ## Quick Example Align the lines of a multi-row flex container using `space-around`: ```css div { display: flex; flex-flow: row wrap; align-content: space-around; } ``` --- ## 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-content** | 21.0 | 11.0 | 28.0 | 9.0
7.0 `-webkit-` | 12.1 | --- ## Definition and Usage The `align-content` property modifies the behavior of the `flex-wrap` property. It aligns the lines within a flex container along the cross-axis, similar to how `justify-content` aligns individual items along the main axis. * **Tip:** Use the (css3-pr-justify-content.html) property to align items along the main axis (horizontally by default). * **Note:** This property has **no effect** on single-line flex containers (i.e., containers where `flex-wrap` is set to `nowrap` or where items do not wrap onto multiple lines). | Feature | Description | | :--- | :--- | | **Default Value:** | `stretch` | | **Inherited:** | No | | **Animatable:** | No (See (css-animatable.html)) | | **CSS Version:** | CSS3 | | **JavaScript Syntax:** | `object.style.alignContent = "center"` | --- ## CSS Syntax ```css align-content: stretch | center | flex-start | flex-end | space-between | space-around | initial | inherit; ``` ### Property Values | Value | Description | | :--- | :--- | | **`stretch`** | **Default value.** Lines stretch to take up the remaining space. If the remaining space is negative, this value is equivalent to `flex-start`. Otherwise, the free space is split equally among all lines, increasing their cross-axis dimensions. | | **`center`** | Lines are packed toward the center of the flex container. The lines are placed adjacent to each other and centered within the container, keeping the spacing between the top of the container and the first line equal to the spacing between the bottom of the container and the last line. | | **`flex-start`** | Lines are packed toward the start of the flex container. The cross-start edge of the first line is placed against the cross-start edge of the container, and each subsequent line is placed flush against the preceding one. | | **`flex-end`** | Lines are packed toward the end of the flex container. The cross-end edge of the last line is placed against the cross-end edge of the container, and each preceding line is placed flush against the following one. | | **`space-between`** | Lines are evenly distributed in the flex container. If the remaining space is negative or there is only a single line, this value is equivalent to `flex-start`. Otherwise, the first line is flush with the start of the container, the last line is flush with the end, and the remaining lines are distributed so that the spacing between any two adjacent lines is equal. | | **`space-around`** | Lines are evenly distributed in the flex container, with half-size spaces on either end. If the remaining space is negative or there is only a single line, this value is equivalent to `center`. Otherwise, the lines are distributed so that the spacing between any two adjacent lines is equal, and the spacing before the first line and after the last line is half the size of the spacing between lines. | | **`initial`** | Sets this property to its default value (`stretch`). See (css-initial.html). | | **`inherit`** | Inherits this property from its parent element. See (css-inherit.html). | --- ## Code Examples ### 1. Centering Wrapped Lines This example centers multiple rows of flex items vertically inside a container. ```html ``` ```css .container { display: flex; flex-wrap: wrap; height: 400px; background-color: #f1f1f1; align-content: center; /* Packs rows tightly in the center */ } .item { width: 150px; height: 100px; margin: 10px; background-color: #2196F3; color: white; text-align: center; line-height: 100px; } ``` ### 2. Space Between Rows This example distributes the rows evenly, pushing the first row to the top and the last row to the bottom. ```css .container space-between-align { display: flex; flex-wrap: wrap; height: 500px; align-content: space-between; /* Distributes rows with equal space between them */ } ``` --- ## Key Considerations 1. **Must Have Multiple Lines:** The `align-content` property only works when there are multiple lines of items in the flex container. Ensure you have `flex-wrap: wrap` or `flex-wrap: wrap-reverse` declared, and that the items actually wrap onto new lines. 2. **Difference between `align-content` and `align-items`:** * **`align-items`** aligns individual flex items within their current flex line. * **`align-content`** aligns the flex lines themselves within the flex container. It has no effect when there is only one line of items. 3. **Container Height:** For `align-content` to have a visible effect, the flex container must have a defined height (or cross-axis dimension) that is larger than the combined height of all the flex rows. --- ## Related Articles * CSS Reference: (css3-pr-align-items.html) * CSS Reference: (css3-pr-align-self.html) * CSS Reference: (css3-pr-justify-content.html)