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.

Class	Declarations
`align-items:align` `/` `ai:align`	`align-items: align`
`align-items:normal`	`align-items: normal`
`align-items:baseline`	`align-items: baseline`
`align-items:center`	`align-items: center`
`align-items:stretch`	`align-items: stretch`
`align-items:start`	`align-items: start`
`align-items:end`	`align-items: end`
`align-items:flex-start`	`align-items: flex-start`
`align-items:flex-end`	`align-items: flex-end`
`align-items:self-start`	`align-items: self-start`
`align-items:self-end`	`align-items: self-end`
`align-items:center-content`	`align-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>

Align Items

Overview [sr-only]

Conditionally apply