flexbox
justify-content
Aligns flex or grid items along the main axis, distributing extra space between them. It has no effect if the items already fill the container.
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | endCommon values
| Value | Effect |
|---|---|
| flex-start | Packs items to the start of the main axis |
| center | Centers items along the main axis |
| flex-end | Packs items to the end of the main axis |
| space-between | Equal space between items, none at edges |
| space-around | Equal space around each item |
| space-evenly | Equal space between items and at edges |
Examples
.nav { display: flex; justify-content: space-between; }Logo left, actions right
.center { display: flex; justify-content: center; }Horizontally centers children
.toolbar { display: flex; justify-content: flex-end; }Buttons pinned to the right
Gotcha
In a column flex container this aligns vertically; use align-items for the cross axis instead.
Related properties
align-items
Aligns flex or grid items along the cross axis of their container. It is the counterpart to justify-content and controls vertical alignment in a default row layout.
flex-direction
Sets the main axis of a flex container, deciding whether items lay out horizontally or vertically. It also determines which direction items are reversed if needed.
gap
Shorthand for row-gap and column-gap, setting spacing between flex, grid, or multi-column items. Replaces margin hacks for evenly spacing children.
flex
Shorthand for flex-grow, flex-shrink, and flex-basis on a flex item. Controls how the item grows or shrinks to fill the flex container.