Retour au cours

Lesson 57: Flex Container Property: align-content (Multi-line Alignment)

**La Maîtrise de CSS : De zéro à expert en 100 leçons** *(Alternative, slightly punchier version using a common French idiomatic structure for full coverage: CSS : Maîtrisez l'essentiel en 100 leçons, but the first option is closer to the original progression.)*

57. Flex Container Property: align-content (Multi-line Alignment)

align-content controls the spacing between lines of flex items when the container has multiple lines (flex-wrap: wrap). It controls distribution along the cross axis, similar to how justify-content works for the main axis.

Note: This property has no effect when flex-wrap: nowrap or when the container has only one line of items.

Available Values

The values are almost identical to justify-content, but they apply to the lines of content, not the items within the lines.

ValueDescription
stretch (default)Lines stretch to take up the remaining space.
flex-startLines are packed at the start of the cross axis.
flex-endLines are packed at the end of the cross axis.
centerLines are centered in the container.
space-betweenLines are distributed evenly, with no space at the start/end.
space-aroundLines are distributed with equal space around each line.

Example: Centering Wrapped Content

If you have three lines of content, and you want them to be clustered in the vertical center of the container:

css .container { display: flex; flex-wrap: wrap; height: 500px; /* Requires a defined height for alignment to be noticeable / align-content: center; / Centers all lines of items vertically */ }

Recap:

  • justify-content: Spacing/alignment of items along the main axis.
  • align-items: Alignment of individual items across the cross axis.
  • align-content: Spacing/alignment of wrapped lines across the cross axis.