justify-content
Distribute free space along the flex main axis or between grid columns.
Overview
| Class | Declarations |
|---|---|
justify-normal | justify-content: normal;
|
justify-left | justify-content: left;
|
justify-center | justify-content: center;
|
justify-right | justify-content: right;
|
justify-stretch | justify-content: stretch;
|
justify-start | justify-content: start;
|
justify-end | justify-content: end;
|
justify-flex-start | justify-content: flex-start;
|
justify-flex-end | justify-content: flex-end;
|
justify-around | justify-content: space-around;
|
justify-between | justify-content: space-between;
|
justify-evenly | justify-content: space-evenly;
|
justify-content:<justify> | justify-content: <justify>;
|
Examples
Distribute items or grid tracks
Use justify-between to place the first and last flex items at the main-axis edges. In Grid, the same utility distributes the column tracks along the inline axis. These containers are both 280px wide; their fixed 80px items or tracks leave visible space between them.
<div id="layout" class="flex justify-between w:17.5rem max-w:100%"> <div id="target" class="flex:none h:3rem w:5rem p-sm">01</div> <div id="peer" class="flex:none h:3rem w:5rem p-sm">02</div></div><div id="layout" class="grid grid-template-columns:5rem|5rem grid-template-rows:48px justify-between w:17.5rem max-w:100%"> <div id="target" class="p-sm">01</div> <div id="peer" class="p-sm">02</div></div>Generated CSS
@layer utilities { .flex { display: flex } .justify-between { justify-content: space-between }}In horizontal writing, a row flexbox and Grid both distribute these boxes horizontally. A column flexbox distributes them vertically instead.
Start, center, or end a group
justify-start, justify-center and justify-end place the whole group while keeping its 16px gap. The first three examples differ only in their alignment. The final example uses flex-col, so the same centering acts vertically.
<div id="layout" class="flex justify-start gap-md w:17.5rem max-w:100%"> <div id="target" class="flex:none h:3rem w:4rem p-sm">01</div> <div id="peer" class="flex:none h:3rem w:4rem p-sm">02</div></div><div id="layout" class="flex justify-center gap-md w:17.5rem max-w:100%"> <div id="target" class="flex:none h:3rem w:4rem p-sm">01</div> <div id="peer" class="flex:none h:3rem w:4rem p-sm">02</div></div><div id="layout" class="flex justify-end gap-md w:17.5rem max-w:100%"> <div id="target" class="flex:none h:3rem w:4rem p-sm">01</div> <div id="peer" class="flex:none h:3rem w:4rem p-sm">02</div></div><div id="layout" class="flex flex-col justify-center gap-md h:14rem w:17.5rem max-w:100%"> <div id="target" class="flex:none h:3rem w:4rem p-sm">01</div> <div id="peer" class="flex:none h:3rem w:4rem p-sm">02</div></div>Distribute extra space
Compare justify-between, justify-around and justify-evenly with three fixed 48px items. Between leaves no outer space; around assigns half as much extra space at each outer edge as between items; evenly assigns the same extra space at all four positions.
<div id="layout" class="flex justify-between gap-md w:17.5rem max-w:100%"> <div id="target" class="flex:none width:3rem height:3rem p-sm">01</div> <div id="peer" class="flex:none width:3rem height:3rem p-sm">02</div> <div id="item-3" class="flex:none width:3rem height:3rem p-sm">03</div></div><div id="layout" class="flex justify-around gap-md w:17.5rem max-w:100%"> <div id="target" class="flex:none width:3rem height:3rem p-sm">01</div> <div id="peer" class="flex:none width:3rem height:3rem p-sm">02</div> <div id="item-3" class="flex:none width:3rem height:3rem p-sm">03</div></div><div id="layout" class="flex justify-evenly gap-md w:17.5rem max-w:100%"> <div id="target" class="flex:none width:3rem height:3rem p-sm">01</div> <div id="peer" class="flex:none width:3rem height:3rem p-sm">02</div> <div id="item-3" class="flex:none width:3rem height:3rem p-sm">03</div></div>The authored 16px gap-md is a minimum gap. Distributed space is added between the items, so with a nonzero gap even justify-evenly has larger inner gaps than outer edges. Flexible growth or automatic margins can consume the free space before this alignment runs.
Keep overflowing content reachable
Pass a native multiword value with pipes: justify-content:safe|center centers content when it fits and falls back to the start when it would overflow. Compare a 280px item inside a 240px scrollport with explicit unsafe centering, then a 192px item that fits.
<div id="layout" class="flex overflow:auto justify-content:safe|center w:15rem max-w:100%" tabindex="0" role="region" aria-label="Safe centered overflow"> <div id="target" class="flex flex:none justify-between h:4rem w:17.5rem p-xs"><span>Start</span><span>End</span></div></div><div id="layout" class="flex overflow:auto justify-content:unsafe|center w:15rem max-w:100%" tabindex="0" role="region" aria-label="Unsafe centered overflow"> <div id="target" class="flex flex:none justify-between h:4rem w:17.5rem p-xs"><span>Start</span><span>End</span></div></div><div id="layout" class="flex overflow:auto justify-content:safe|center w:15rem max-w:100%" tabindex="0" role="region" aria-label="Safe centered fitting content"> <div id="target" class="flex flex:none justify-between h:4rem w:12rem p-xs"><span>Start</span><span>End</span></div></div>Unsafe centering pushes 20px beyond the starting edge in this example; that portion cannot be reached by scrolling. Safe alignment keeps the start visible and allows the remaining overflow to scroll at the end.
Apply conditionally
Use conditional queries to change alignment at a real viewport width. The same two items start at the leading edge, center from sm, and move to opposite edges from lg. The 280px container keeps the amount of free space consistent as the iframe crosses each breakpoint.
<div id="layout" class="flex justify-start gap-md w:17.5rem max-w:100% justify-center@sm justify-between@lg"> <div id="target" class="flex:none h:3rem w:4rem p-sm">01</div> <div id="peer" class="flex:none h:3rem w:4rem p-sm">02</div></div>