justify-content
Distributes items along the main axis of a flex or grid container.
Syntax
justify-content: value;Values
| Parameter | Type | Description |
|---|---|---|
| flex-start | keyword | At the start (the default). |
| center | keyword | In the center. |
| flex-end | keyword | At the end. |
| space-between | keyword | The first and last at the edges, the rest evenly between them. |
| space-around | space-evenly | keyword | Even spacing around the items, including the edges. |
Examples
Center, spread and end:
<style>
.row { display: flex; padding: 6px; margin-bottom: 6px; background: whitesmoke; }
.row div { padding: 6px 12px; background: lightskyblue; }
</style>
<div class="row" style="justify-content: center;"><div>A</div><div>B</div></div>
<div class="row" style="justify-content: space-between;"><div>A</div><div>B</div><div>C</div></div>
<div class="row" style="justify-content: flex-end;"><div>A</div><div>B</div></div>Notes
justify-content works only when there is free space; if items fill the whole width, it changes nothing. space-between is the classic way to put a logo on the left and a menu on the right.
See also
- align-items — Aligns items across the main axis — vertically in a row.
- gap — The gaps between items in flexbox and grid.
- align-content — Distributes the lines of a multi-line flex container, or the rows of a grid, along the cross axis.
Related recipes
In the tutorial
- Flexbox — Laying elements out in a row or a column with flexbox — axes, direction, gaps, alignment and wrapping.