align-content

Controls how multi-line flex items are aligned on the cross axis. Only takes effect when flex-wrap: wrap is applied and items wrap into multiple lines.

Class List

Class	CSS	Description
`acs`	align-content: stretch	Default. Lines fill remaining space equally
`acfs`	align-content: flex-start	Aligns all lines to cross-axis start (top)
`acfe`	align-content: flex-end	Aligns all lines to cross-axis end (bottom)
`acc`	align-content: center	Centers all lines on the cross axis
`acsb`	align-content: space-between	First and last lines at edges, rest evenly distributed
`acsa`	align-content: space-around	Equal spacing above and below each line

Visual Comparison

Applies df fww to a fixed-height container and compares how each align-content value affects multiple lines.

Stretch (default value) — acs

Item 1Item 2Item 3Item 4Item 5Item 6Item 7Item 8

Each line stretches equally to fill remaining space

Flex Start — acfs

Item 1Item 2Item 3Item 4Item 5Item 6Item 7Item 8

All lines packed to the top

Flex End — acfe

Item 1Item 2Item 3Item 4Item 5Item 6Item 7Item 8

All lines packed to the bottom

Center — acc

Item 1Item 2Item 3Item 4Item 5Item 6Item 7Item 8

All lines centered

Space Between — acsb

Item 1Item 2Item 3Item 4Item 5Item 6Item 7Item 8

First line at top, last at bottom, rest evenly distributed

Space Around — acsa

Item 1Item 2Item 3Item 4Item 5Item 6Item 7Item 8

Equal spacing above and below each line

align-items vs align-content

align-items controls cross-axis alignment of individual items within each line, while align-content aligns the lines themselves as a group.

align-items: center — aic

Item 1Item 2Item 3Item 4Item 5Item 6

Centers items individually within each line. Spacing between lines remains unchanged

align-content: center — acc

Item 1Item 2Item 3Item 4Item 5Item 6

Groups all lines together and centers them in the container

	align-items	align-content
Target	Individual items within each row	Lines as a group
Condition	Always works	flex-wrap: wrap required (multi-line only)
Single line	Has effect	No effect
Multiple lines	Aligns items within each row	Controls inter-line spacing/position
Key classes	aic, aifs, aife, aib	acc, acfs, acfe, acsb, acsa

Class Details

`acs`align-content: stretch

Default. Each line stretches equally to fill remaining space. Lines expand when container height exceeds total item height.

<!-- stretch: rows evenly distribute remaining space -->
<div class="df fww acs h30rem gap8px">
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 1</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 2</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 3</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 4</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 5</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 6</div>
</div>

`acfs`align-content: flex-start

Packs all lines to the cross-axis start (top). Empty space at the bottom.

<!-- flex-start: all rows to top -->
<div class="df fww acfs h30rem gap8px">
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 1</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 2</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 3</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 4</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 5</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 6</div>
</div>

`acfe`align-content: flex-end

Packs all lines to the cross-axis end (bottom). Empty space at the top.

<!-- flex-end: all rows to bottom -->
<div class="df fww acfe h30rem gap8px">
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 1</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 2</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 3</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 4</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 5</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 6</div>
</div>

`acc`align-content: center

Centers all lines along the cross axis. Equal empty space above and below.

<!-- center: all rows to center -->
<div class="df fww acc h30rem gap8px">
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 1</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 2</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 3</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 4</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 5</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 6</div>
</div>

<!-- jcc Combination: both horizontal and vertical center -->
<div class="df fww jcc acc h30rem gap8px">
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Perfect Center</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Aligned</div>
</div>

`acsb`align-content: space-between

First line at start, last at end, remaining lines evenly distributed.

<!-- space-between: first row at top, last row at bottom -->
<div class="df fww acsb h30rem gap8px">
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 1</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 2</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 3</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 4</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 5</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 6</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 7</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 8</div>
</div>

`acsa`align-content: space-around

Equal spacing above and below each line. Edge spacing is half the inter-line spacing.

<!-- space-around: equal gap around each row -->
<div class="df fww acsa h30rem gap8px">
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 1</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 2</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 3</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 4</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 5</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 6</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 7</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 8</div>
</div>

Tips & Notes

fww required

align-content must be used with fww (flex-wrap: wrap). No effect on single-line flex.

Use align-items for single lines

When all items fit in a single line, align-content is ignored. Use align-items classes like aic, aifs.

Container height required

To see align-content effects, the container needs explicit height (e.g., h30rem, h100vh). With auto height, alignment differences are invisible.

align-items align-self flex-wrap justify-content