Flexbox declarado por classe — direção, quebra, alinhamento, e um item que estica sozinho.
O que é
Utilitários de flexbox pra layout de linha/coluna sem escrever CSS próprio.
Como funciona
Cada classe seta UMA propriedade flex, sem atalho combinado — você monta o comportamento juntando flx (o container) com quantas classes precisar (f-cl, j-sb, alc…). Grade de página é .l (Grid), não flex — flex aqui é pra alinhar um punhado de itens numa linha (barra, chips, ícone+texto).
Exemplos
Linha, coluna e espaçamento entre pontas Ao vivo
a
b
esquerdadireita
<div class="flx gap-m">itens numa linha</div>
<div class="flx f-cl gap-m">em coluna</div>
<div class="flx f-wr gap-m">quebra quando não cabe</div>
<div class="flx j-sb alc">
<span>esquerda</span>
<span>direita (j-sb empurra pras pontas)</span>
</div>
<!-- .f-1 = estica e ocupa a sobra · .ml-au = empurra só este pro fim -->
Alinhamento vertical — alc, als, ale, alb, alst Ao vivo
alc
als
ale
<div class="flx alc">centralizado na vertical</div>
<div class="flx als">encostado em cima (flex-start)</div>
<div class="flx ale">encostado embaixo (flex-end)</div>
<div class="flx alb">alinhado pela linha de base do texto</div>
<div class="flx alst">esticado pra ocupar a altura toda (padrão)</div>
<!-- por item, em vez do pai inteiro: .as-ct .as-st .as-en -->
Atributos
Nenhum.
Variantes
flx
display:flex — direção linha (padrão)
f-cl
direção coluna
f-wr
quebra quando não cabe
j-ct · j-sb · j-se
justify-content: center / space-between / space-evenly
alc · als · ale · alb · alst
align-items: center / flex-start / flex-end / baseline / stretch
