Syntax

Justify Items

Controlling how items are aligned along its inline axis.

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

Overview

ClassDeclarations
justify-items:valuejustify-items: value;
justify-items:normaljustify-items: normal;
justify-items:baselinejustify-items: baseline;
justify-items:leftjustify-items: left;
justify-items:centerjustify-items: center;
justify-items:rightjustify-items: right;
justify-items:stretchjustify-items: stretch;
justify-items:legacyjustify-items: legacy;
justify-items:startjustify-items: start;
justify-items:endjustify-items: end;
justify-items:flex-startjustify-items: flex-start;
justify-items:flex-endjustify-items: flex-end;
justify-items:self-startjustify-items: self-start;
justify-items:self-endjustify-items: self-end;

Conditionally apply

Apply styles based on different states using selectors and applying conditionally.

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

Customizing color variables or starting with the crafted palette.

© Aoyue Design LLC.