Grid And Flexbox

Align Items

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

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

Overview [sr-only]

ClassDeclarations
align-items:align / ai:alignalign-items: align
align-items:normalalign-items: normal
align-items:baselinealign-items: baseline
align-items:centeralign-items: center
align-items:stretchalign-items: stretch
align-items:startalign-items: start
align-items:endalign-items: end
align-items:flex-startalign-items: flex-start
align-items:flex-endalign-items: flex-end
align-items:self-startalign-items: self-start
align-items:self-endalign-items: self-end
align-items:center-contentalign-items: center-content
One
Two
Three
<div class="flex align-items:center">
<div class="py:30 flex:1">One</div>
<div class="py:50 flex:1">Two</div>
<div class="py:20 flex:1">Three</div>
</div>

Conditionally apply

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

<div class="align-items:center:hover align-items:center@sm align-items:center@dark align-items:center@print"></div>
PREVIOUS
Align Content

Style syntax for controlling how multiple rows or columns are aligned along its cross axis.

NEXT
Align Self

Style syntax for controlling how an individual item is aligned along its cross axis.

MIT License © Aoyue Design LLC.