Justify Content
Web Awesome includes classes to set the justify-content property of flex and grid containers. Use them alongside other Web Awesome layout utilities, like cluster and stack, to distribute space between items along the container's main axis.
| 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?
Jump to heading
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.