Skip to content

Flex sizing

Utilities for controlling how flex items grow, shrink, and size.

Quick reference

Class	Styles
`af-grow`	`flex-grow: 1`
`af-grow-0`	`flex-grow: 0`
`af-shrink`	`flex-shrink: 1`
`af-shrink-0`	`flex-shrink: 0`
`af-basis-0`	`flex-basis: 0`
`af-basis-auto`	`flex-basis: auto`

Examples

Grow

Fixed

af-grow

<div class="af-flex" style="gap: 0.5rem; width: 100%; max-width: 20rem;">
  <div class="af-bg-primary-soft af-radius-sm af-p-sm" style="width: 6rem;">
    Fixed
  </div>
  <div class="af-bg-primary-soft af-radius-sm af-p-sm af-grow">
    af-grow
  </div>
</div>

Responsive variants

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

Order