Justify Content
These utility classes control how space is distributed between items along a flex or grid container's main axis, which is the axis its children flow along. Reach for them when you want to push items to one end of a cluster or stack, center a row of buttons, or spread a set of navigation links evenly across a header.
| Class Name | justify-content Value |
Preview |
|---|---|---|
wa-justify-content-start |
flex-start |
|
wa-justify-content-end |
flex-end |
|
wa-justify-content-center |
center |
|
wa-justify-content-space-around |
space-around |
|
wa-justify-content-space-between |
space-between |
|
wa-justify-content-space-evenly |
space-evenly |
What's the Main Axis?
The main axis runs parallel to a container's content direction. For grid containers and flex containers where flex-direction is row, the main axis runs in the inline direction. For containers where flex-direction is column, the main axis runs in the block direction.