Align self

Utilities for aligning a single flex/grid item.

Quick reference

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

Examples

Center one item

A

af-self-center

C

<div class="af-flex af-items-stretch" style="height: 5rem; gap: 0.5rem;">
  <div class="af-badge">
    A
  </div>
  <div class="af-badge af-self-center">
    af-self-center
  </div>
  <div class="af-badge">
    C
  </div>
</div>

Responsive variants

All align-self utilities support responsive variants using the @{bp} suffix. See Responsive Suffix for syntax and breakpoints.

Related

• Align items