Align items

Utilities for aligning flex items along the cross axis.

Quick reference

Class	Styles
af-items-start	align-items: flex-start
af-items-center	align-items: center
af-items-end	align-items: flex-end
af-items-stretch	align-items: stretch
af-items-baseline	align-items: baseline

Examples

Basic example

A

B

C

<div class="af-flex af-items-center" style="height: 5rem; gap: 0.5rem;">
  <div class="af-badge">
    A
  </div>
  <div class="af-badge" style="padding-top: 1.25rem; padding-bottom: 1.25rem;">
    B
  </div>
  <div class="af-badge">
    C
  </div>
</div>

Responsive variants

All align-items utilities support responsive variants using the @{bp} suffix:

• af-items-start@md

See Responsive Suffix for syntax and breakpoints.

Related

• Justify content