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
cs-justify-content-start	flex-start
cs-justify-content-end	flex-end
cs-justify-content-center	center
cs-justify-content-space-around	space-around
cs-justify-content-space-between	space-between
cs-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.