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]

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
<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>

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>
Align Content

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

Align Self

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

MIT License © Aoyue Design LLC.