CSS align-content Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The align-content CSS property controls how multiple lines of content are spaced and positioned along the cross axis of a flex or grid container. Unlike properties that affect individual items, align-content works on the distribution of space between rows or columns as a group. It only has a visible effect when there is extra space in the container and when content wraps into more than one line (for example, when flex-wrap: wrap is used or when a grid has multiple rows). If all items fit on a single line, align-content will have no visual impact.

In Flexbox layouts, align-content determines how rows of flex items are spaced vertically (in a row-based layout) or horizontally (in a column-based layout). It helps control how the entire group of wrapped items aligns within the container, rather than how each item aligns individually. This makes it especially useful for responsive designs where items wrap dynamically depending on screen size. Designers often use it to balance white space, center blocks of content, or distribute rows evenly for a cleaner visual layout.

In CSS Grid, align-content controls how the grid tracks (rows) are positioned inside the container when the grid does not fill all available vertical space. It influences the spacing between rows as well as how the entire grid aligns within its container. This makes it a powerful tool for shaping overall layout structure without adjusting individual grid items. When combined with other alignment properties like justify-content and align-items, align-content helps create polished, well-balanced layouts that adapt smoothly across different screen sizes and content lengths.

Definition

Initial value: stretch
Applies to: Multi-line flex containers
Inherited: No
Computed value: specified keyword
Animatable: yes
JavaScript syntax: object.style.alignContent

Interactive Demo

One

Two

Three

Syntax

align-content: start | end | flex-start | flex-end | center | space-between | space-around | space-evenly | stretch

Values

startAligns the flexbox lines or grid items to the start of the cross axis.
endAligns the flexbox lines or grid items to the end of the cross axis.
flex-startLines inside the container are located at the beginning of the transverse axis of the flex container, or the initial edge of the grid of the grid container. For layout grid elements (grid elements) the abbreviated start value is allowed, for flex elements it is necessary to use the full flex-start value.
flex-endLines inside the container are located at the end of the transverse axis of the flex container, or along the edge of the grid of the grid container. For layout grid elements (grid elements), the abbreviated end value is allowed; for flex elements, the full flex-end value must be used.
centerLines inside the container are located in its center.
space-betweenThe lines inside the container are evenly distributed, with the first line being positioned at the beginning of the transverse axis, and the last line being positioned from the end of the transverse axis.
space-aroundLines inside the container are evenly distributed, while the space between two adjacent lines is the same, and the empty space before the first line and after the last line is half of the space between adjacent lines.
space-evenlyPlaces an even space between each line, including the top and bottom edges of the container.
stretchThe lines inside the container stretch evenly, filling the free space (resizes the grid elements, or flex elements so that the elements fill the entire height of the container). This is the default value.

Example

HTML

<div class="wrapper">

    <h2 class="title">align-content: space-between</h2>

    <div class="flex-container">

        <div class="item">1</div>

        <div class="item">2</div>

        <div class="item">3</div>

        <div class="item">4</div>

        <div class="item">5</div>

        <div class="item">6</div>

        <div class="item">7</div>

        <div class="item">8</div>

    </div>

</div>

CSS

/* Container and example layout */
.wrapper {
    font-family: Arial, Helvetica, sans-serif;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
}

.title {
    margin: 0;
    font-size: 16px;
}

.flex-container {
    display: flex;                /* establishes flex formatting context */
    flex-wrap: wrap;             /* allow items to wrap to multiple rows */
    align-content: space-between;/* controls spacing of rows when there is extra cross-axis space */
    width: 520px;
    height: 260px;               /* extra space to make align-content visible */
    padding: 12px;
    gap: 12px;                   /* space between items */
    background: #f6f8fa;
    border: 1px solid #e1e4e8;
    border-radius: 8px;
    box-sizing: border-box;
}

.item {
    flex: 0 0 120px;             /* fixed basis so items wrap predictably */
    height: 60px;
    background: linear-gradient(135deg,#4aa 0%,#3a8 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    border-radius: 6px;
}

/* Try other values for align-content:
   flex-start | center | stretch | space-around | space-evenly | space-between
*/

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS align-content property. Hover over a browser icon to see the version that first introduced support for this CSS property.