Syntax

Justify Content

Controlling how items are aligned along its main axis.

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

Overview

ClassDeclarations
justify-content: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 based on different states using selectors and applying conditionally.

<div class="justify-content:normal:hover justify-content:normal@sm justify-content:normal@dark justify-content:normal@print"></div>
Design Token
Colors

Customizing color variables or starting with the crafted palette.

© Aoyue Design LLC.