align-content
Distributes the lines of a multi-line flex container, or the rows of a grid, along the cross axis.
Syntax
align-content: value;Values
| Parameter | Type | Description |
|---|---|---|
| flex-start | center | flex-end | keyword | Lines at the start, in the center or at the end. |
| space-between | keyword | The first and last lines at the edges. |
| stretch | keyword | Lines stretch to fill the space (the default). |
Examples
Lines spread across the height of the container:
<style>
.box { display: flex; flex-wrap: wrap; gap: 6px; width: 200px; height: 140px; background: whitesmoke; }
.box div { width: 80px; padding: 6px; background: lightcoral; }
</style>
<div class="box" style="align-content: space-between;">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>Notes
In flexbox align-content works only with flex-wrap: wrap and free space in the container. place-content sets align-content and justify-content at once.
See also
- flex-wrap — Whether flex items may wrap onto new lines.
- align-items — Aligns items across the main axis — vertically in a row.
- justify-content — Distributes items along the main axis of a flex or grid container.
In the tutorial
- Flexbox — Laying elements out in a row or a column with flexbox — axes, direction, gaps, alignment and wrapping.