CSS propertyFlexbox

align-content

Positions entire lines of items along a container’s cross axis.

Initial value: normal
Inherited: No
Animatable: no
Applies to: flex containers with multiple lines, grid containers, multi-column and block containers
JavaScript: element.style.alignContent = "center"

On this page

Example
Definition and usage
Syntax
Values
Values in practice
Browser support
Good practices
Related entries

Example

CSS

.badges {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 6px;
  height: 120px;
}

Preview

Definition and usage

The align-content property works at the level of lines, not individual items. In a flex container it only matters once items wrap onto several lines (flex-wrap: wrap) and there’s free space left on the cross axis.

The values resemble justify-content: lines can bunch up at the start, in the center, at the end, or spread out with equal spacing. By default, lines stretch to fill the container.

In a Grid layout, the same property positions entire rows, and in newer browsers it also works on plain block containers, which lets you center content vertically without Flexbox.

Syntax

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

Values

flex-start
Lines bunch up at the top edge.
center
Lines group together in the center.
flex-end
Lines line up at the bottom.
space-between
The first line at the top, the last at the bottom, the rest of the space between them.
stretch
Lines stretch to fill the height.

Value	Description
flex-start	Lines bunch up at the top edge.
center	Lines group together in the center.
flex-end	Lines line up at the bottom.
space-between	The first line at the top, the last at the bottom, the rest of the space between them.
stretch	Lines stretch to fill the height.

Values in practice

flex-start

Lines bunch up at the top edge.

.demo { align-content: flex-start; }

center

Lines group together in the center.

.demo { align-content: center; }

flex-end

Lines line up at the bottom.

.demo { align-content: flex-end; }

space-between

The first line at the top, the last at the bottom, the rest of the space between them.

.demo { align-content: space-between; }

stretch

Lines stretch to fill the height.

.demo { align-content: stretch; }

Browser support

Widely available

Works in all modern browsers, phones included. You can use it without worry.

Chrome
Edge
Firefox
Safari

Good practices

If align-content doesn’t change anything, check that the container has flex-wrap: wrap and a height greater than its content.
align-items, not align-content, is what aligns items within a single line.

Related entries

Spotted a mistake or missing an example? Write to us.

Free lessonsPractice CSS in the HTML and CSS courseExercises with hints, a code editor and progress saved as you go.See the course