Grid And Flexbox

Justify Content

Style syntax for controlling how items are aligned along its main axis.

🚧This page is still under construction and some content may not be complete.

Overview [sr-only]

ClassDeclarations
justify-content:justify / jc:justifyjustify-content: justify
justify-content:normaljustify-content: normal
justify-content:leftjustify-content: left
justify-content:centerjustify-content: center
justify-content:rightjustify-content: right
justify-content:stretchjustify-content: stretch
justify-content:startjustify-content: start
justify-content:endjustify-content: end
justify-content:flex-startjustify-content: flex-start
justify-content:flex-endjustify-content: flex-end
justify-content:space-aroundjustify-content: space-around
justify-content:space-betweenjustify-content: space-between
justify-content:space-evenlyjustify-content: space-evenly
justify-content:center-contentjustify-content: center-content

Conditionally apply

Apply styles in different states using selectors, media queries, etc.

<div class="justify-content:normal:hover justify-content:normal@sm justify-content:normal@dark justify-content:normal@print"></div>
PREVIOUS
Gap

Style syntax for setting the gutters between rows and columns.

NEXT
Justify Items

Style syntax for controlling how items are aligned along its inline axis.

MIT License © Aoyue Design LLC.