justify-content (FlexBox property)
The justify-content property aligns flex items along the main axis (horizontal in default flex-direction: row). It distributes extra space when items do not fully occupy the container.
From Image: Flex box Main Axis Horizontal (flex-direction: row)
Go to text →
Available Values
| Value | Description |
|---|---|
flex-start | Items packed toward the start of the main axis (left in LTR). |
flex-end | Items packed toward the end of the main axis (right in LTR). |
center | Items centered along the main axis. |
space-between | Items evenly distributed; first item at start, last at end, equal space between. |
space-around | Items evenly distributed with equal space around each item (half-size space at ends). |
space-evenly | Items distributed with equal space between all items, including ends. |
Code Example
GT-Sandbox-Snapshot
Command to reproduce:
gt.sandbox.checkout.commit a57600e8b590e7527511 \
&& cd "${GT_SANDBOX_REPO}" \
&& cmd.run.announce "chrome ./main/index.html"
Recorded output of command:
_chrome ./main/index.html
Opening in chrome: ./main/index.html
Use Cases
- Navigation Bars: Align links to the left, center, or right.
- Toolbars: Distribute buttons evenly or group them at edges.
- Card Layouts: Control spacing between cards in a row.
Tip: For vertical alignment (cross-axis), use align-items or align-content instead.
Backlinks