Classes list
Every class Flex utilities recognizes, straight from the @flickui/css source.
| Class | Purpose |
|---|---|
.flex | display: flex |
.direction-row / .direction-row-reverse | flex-direction: row / row-reverse |
.direction-column / .direction-column-reverse | flex-direction: column / column-reverse |
.gap-xs|sm|md|lg|xl | gap (both axes) at the matching space scale |
.gap-x-xs|sm|md|lg|xl | column-gap only |
.gap-y-xs|sm|md|lg|xl | row-gap only |
.jc-start|end|center|between|around|evenly | justify-content |
.ai-start|end|center|stretch|baseline | align-items |
.ac-start|end|center|between|around|evenly|stretch | align-content |
.ji-start|end|center|stretch | justify-items |
.jcai-<jc>-<ai> | Combined justify-content + align-items in one class (30 combinations) |
.wrap-nowrap / .wrap-wrap / .wrap-wrap-reverse | flex-wrap |
.flex-1 | flex: 1; min-width: 0 — a child that grows to fill remaining space |
.w-100 | width: 100% |
.text-muted | Sets color to the muted text token |
.visually-hidden | Screen-reader-only content (visually hidden, still announced) |