Sizing

Utilities for sizing elements.

Quick reference

Class	Styles
af-w-full	width: 100%
af-h-full	height: 100%
af-min-w-0	min-width: 0
af-min-h-0	min-height: 0

Examples

Full width

af-w-full

<div style="max-width: 18rem;">
  <div class="af-bg-primary-soft af-radius-sm af-w-full af-p-sm">af-w-full</div>
</div>

Full-width button

Continue

<button type="submit" class="af-btn af-w-full">Continue</button>

Responsive design

Prefix a sizing utility with a breakpoint suffix to apply it from that breakpoint and up:

<div class="af-w-full@md">
  <!-- ... -->
</div>

See Responsive Suffix for syntax and breakpoints.

Related

• Flex sizing
• Button (stretch with af-w-full)