Flex no SW Core — documentação e exemplos

O que é

É a ferramenta para colocar alguns itens lado a lado e alinhá-los: logo à esquerda e botão à direita no topo, ícone + texto, fileira de botões, etiquetas que quebram linha. Você coloca flx no bloco de fora e os filhos ficam em linha; depois junta classes para dizer para onde eles vão (j-…, na horizontal) e como se alinham na altura (al…, na vertical).

É só CSS (Flexbox). Cada classe faz uma coisa só, e você monta o que quer juntando: flx (liga) + direção (f-cl coluna) + quebra (f-wr) + distribuição (j-sb, j-ct…) + alinhamento (alc…) + espaço (gap-*, da página Espaçamento). Para montar a página em colunas (cards, galeria), use a Grade; flex é para alinhar um punhado de coisas.

Quando usar

Topo do site: logo numa ponta, menu/botão na outra — flx j-sb alc.
Ícone + texto alinhados no meio — flx alc gap-p.
Fileira de botões — flx gap-p f-wr.
Etiquetas, filtros, tags que quebram linha — flx f-wr gap-p.
Empilhar com espaço igual (campos de formulário) — flx f-cl gap-m.
Centralizar algo no meio da caixa — flx j-ct alc.

Comece aqui

1
Coloque o SW Core no <head>. As classes de flex estão no arquivo principal.
```
<link rel="stylesheet" href="swcore/swcore.min.css">
```
2
flx no bloco de fora: os filhos ficam em linha. Aqui: pontas (j-sb) e centro na vertical (alc).

Studio SolAgendar
```
<div class="flx j-sb alc">
  <strong>Studio Sol</strong>
  <a href="/agendar" sw-btn="pri p">Agendar</a>
</div>
```

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

1. Ligar e escolher a direção

flx põe em linha. Troque a direção com f-cl (coluna) ou inverta a ordem com f-rr / f-clr.

ABC

flx — em linha (padrão)

<div class="flx gap-p">
  <span>A</span>
  <span>B</span>
  <span>C</span>
</div>

ABC

flx f-cl — em coluna

<div class="flx f-cl gap-p">
  <span>A</span>
  <span>B</span>
  <span>C</span>
</div>

ABC

flx f-rr — linha invertida

<div class="flx f-rr gap-p">
  <span>A</span>
  <span>B</span>
  <span>C</span>
</div>

ABC

flx f-clr — coluna invertida

<div class="flx f-clr gap-p">
  <span>A</span>
  <span>B</span>
  <span>C</span>
</div>

Texto AB no meio

iflx — em linha, sem ocupar a largura toda

<span class="iflx gap-pp">
  <span>A</span>
  <span>B</span>
</span>

2. Para onde vão na horizontal (j-)

Com flx em linha. As linhas tracejadas mostram o espaço do pai.

ABC

j-st — no começo (padrão)

<div class="flx j-st">
  <span>A</span>
  <span>B</span>
  <span>C</span>
</div>

ABC

j-ct — no centro

<div class="flx j-ct">
  <span>A</span>
  <span>B</span>
  <span>C</span>
</div>

ABC

j-en — no fim

<div class="flx j-en">
  <span>A</span>
  <span>B</span>
  <span>C</span>
</div>

ABC

j-sb — nas pontas

<div class="flx j-sb">
  <span>A</span>
  <span>B</span>
  <span>C</span>
</div>

ABC

j-sa — espaço em volta de cada um

<div class="flx j-sa">
  <span>A</span>
  <span>B</span>
  <span>C</span>
</div>

ABC

j-se — espaços todos iguais

<div class="flx j-se">
  <span>A</span>
  <span>B</span>
  <span>C</span>
</div>

3. Como se alinham na altura (al…)

Os itens têm alturas diferentes para você ver a diferença.

ABC

als — em cima

<div class="flx als gap-p">
  <span class="py-pp">A</span>
  <span class="py-m">B</span>
  <span class="py-g">C</span>
</div>

ABC

alc — no meio

<div class="flx alc gap-p">
  <span class="py-pp">A</span>
  <span class="py-m">B</span>
  <span class="py-g">C</span>
</div>

ABC

ale — embaixo

<div class="flx ale gap-p">
  <span class="py-pp">A</span>
  <span class="py-m">B</span>
  <span class="py-g">C</span>
</div>

ABC

alst — esticados (padrão)

<div class="flx alst gap-p">
  <span class="py-pp">A</span>
  <span class="py-m">B</span>
  <span class="py-g">C</span>
</div>

ABC

alb — pela linha do texto

<div class="flx alb gap-p">
  <span class="t-pp">A</span>
  <span class="t-g">B</span>
  <span class="t-xg">C</span>
</div>

4. Um item diferente dos outros

Classes no filho: alinhar só ele (as-…), fazê-lo ocupar a sobra (f-1), empurrá-lo para o fim (ml-au) ou impedir que encolha (f-sh0).

ABC

as-st — só este em cima

<div class="flx gap-p">
  <span class="py-g">A</span>
  <span class="as-st">B</span>
  <span class="py-g">C</span>
</div>

ABC

as-ct — só este no meio

<div class="flx gap-p">
  <span class="py-g">A</span>
  <span class="as-ct">B</span>
  <span class="py-g">C</span>
</div>

ABC

as-en — só este embaixo

<div class="flx gap-p">
  <span class="py-g">A</span>
  <span class="as-en">B</span>
  <span class="py-g">C</span>
</div>

AB esticaC

f-1 — ocupa o espaço que sobra

<div class="flx gap-p">
  <span>A</span>
  <span class="f-1">B estica</span>
  <span>C</span>
</div>

ABC

ml-au — empurra este para o fim

<div class="flx gap-p">
  <span>A</span>
  <span>B</span>
  <span class="ml-au">C</span>
</div>

ÍconeTexto comprido que pode apertar o vizinho da esquerda

f-sh0 — não deixa encolher

<div class="flx gap-p">
  <span class="f-sh0">Ícone</span>
  <span>Texto comprido…</span>
</div>

5. Quebrar linha

Sem f-wr, os itens se espremem numa linha só. Com ele, descem quando não cabem.

CorteBarbaSobrancelhaPigmentação

sem f-wr — tudo numa linha

<div class="flx gap-p">
  <span>Corte</span>
  <span>Barba</span>
  <span>Sobrancelha</span>
  <span>Pigmentação</span>
</div>

CorteBarbaSobrancelhaPigmentação

f-wr — quebra quando não cabe

<div class="flx f-wr gap-p">
  <span>Corte</span>
  <span>Barba</span>
  <span>Sobrancelha</span>
  <span>Pigmentação</span>
</div>

6. Outros jeitos de exibir

Classes curtas de exibição que moram junto do flex.

span virou bloco

blk — bloco (ocupa a linha) <span class="blk bg-pri-soft t-pri r-p p-p t-pp w-fl">span virou bloco</span>

Antes

div em linha

depois

inline — em linha com o texto <div class="inline">div em linha</div>

Aqui tem um item escondido: você não me vê.

non — escondido (não aparece nem ocupa espaço) <span class="t-p">Aqui tem um item escondido: <span class="non">você não me vê</span>.</span>

AB

grd — grade (página Grid)

<div class="grd gap-pp">
  <span class="bg-pri r-p px-p py-pp t-pp">A</span>
  <span class="bg-pri r-p px-p py-pp t-pp">B</span>
</div>

Tabela de opções

Palavra	O que faz	Exemplo
Ligar
`flx`	Liga o flex: filhos em linha.	`class="flx"`
`iflx`	Igual, mas o bloco fica do tamanho do conteúdo, no meio do texto.	`class="iflx"`
Direção e quebra (no pai)
`f-cl`	Em coluna (um embaixo do outro).	`class="flx f-cl"`
`f-rr · f-clr`	Linha invertida · coluna invertida.	`class="flx f-rr"`
`f-wr`	Quebra linha quando não cabe.	`class="flx f-wr"`
Horizontal — para onde vão (no pai)
`j-st`	No começo (padrão).
`j-ct`	No centro.	`class="flx j-ct"`
`j-en`	No fim.	`class="flx j-en"`
`j-sb`	Primeiro e último nas pontas, o resto espalhado.	`class="flx j-sb"`
`j-sa`	Espaço igual em volta de cada um.
`j-se`	Todos os espaços iguais, inclusive nas pontas.
Vertical — como se alinham (no pai)
`als`	Em cima.	`class="flx als"`
`alc`	No meio.	`class="flx alc"`
`ale`	Embaixo.
`alb`	Pela linha de base do texto.
`alst`	Esticados na altura toda (padrão).
No filho
`as-st · as-ct · as-en`	Alinha só este item: em cima · no meio · embaixo.	`class="as-ct"`
`f-1`	Cresce e ocupa o espaço que sobra.	`class="f-1"`
`f-sh0`	Não encolhe (bom para ícone e foto).	`class="f-sh0"`
`ml-au`	Empurra este (e os seguintes) para o fim.	`class="ml-au"`
`mx-au`	Centraliza este na linha.	`class="mx-au"`
Espaço entre os itens
`gap-pp … gap-xxg · gap-0`	Régua de espaço (página Espaçamento).	`class="flx gap-p"`
`gap-x-* · gap-y-*`	Só horizontal · só vertical.	`class="flx f-wr gap-x-g gap-y-p"`
Exibição
`blk · inline · non · grd`	Bloco · em linha com o texto · escondido · grade.	`class="non"`

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

Topo do site: logo, menu e botão Ao vivo

<nav class="flx alc gap-m bg-sur bd r-m px-g py-p f-wr">
  <strong class="t-txt">Studio Sol</strong>
  <a href="/servicos">Serviços</a>
  <a href="/precos">Preços</a>
  <a href="/agendar" sw-btn="pri p" class="ml-au">Agendar</a>
</nav>

Item de lista com foto, texto e preço Ao vivo

Corte degradê

30 min · com lavagem

R$ 45

<div class="flx alc gap-m bg-sur bd r-m p-m">
  <span class="f-sh0 bg-pri-soft t-pri r-m p-m"><i class="swi-cut t-gg"></i></span>
  <div class="f-1">
    <strong class="t-txt">Corte degradê</strong>
    <p class="t-p mb-0">30 min · com lavagem</p>
  </div>
  <strong class="t-txt t-g">R$ 45</strong>
</div>

Chamada centralizada no meio da caixa Ao vivo

Sem horário na agenda? Chame no WhatsApp

<div class="flx f-cl j-ct alc gap-m bg-sur bd r-m py-xg px-g t-ct">
  <strong class="t-txt t-gg">Sem horário na agenda?</strong>
  <a href="https://wa.me/5511999999999" sw-btn="suc"><i class="swil-whatsapp"></i> Chame no WhatsApp</a>
</div>

Filtros que quebram linha Ao vivo

<div class="flx f-wr gap-p">
  <button sw-btn="pri p pill">Todos</button>
  <button sw-btn="out p pill">Cabelo</button>
  <button sw-btn="out p pill">Barba</button>
  <!-- … -->
</div>

Precisa de quê

swcore.min.css — todas as classes desta página.
swcore.compl.min.css — só para os ícones swi-*/swil-* das receitas.

Cuidados — erros comuns

j-…, al…, f-wr e gap vão no pai (o que tem flx). Sem flx no pai, eles não fazem nada.
Com f-cl (coluna) os papéis trocam: j-… passa a mexer na vertical e al… na horizontal.
j-ct alc só centraliza "na altura" se o pai tiver altura maior que o conteúdo (espaço para centralizar).
Itens espremidos ou saindo da tela no celular? Falta f-wr no pai.
Para montar colunas da página (3 cards por linha que empilham no celular), use a Grade (l l-3), não flex.

O que ele não faz

Não tem versão por tamanho de tela (ex.: coluna no celular e linha no computador). Para isso use a Grade com sufixos, ou o seu CSS.
Não tem classe de ordem (order) nem de tamanho base (flex-basis): no seu CSS.

Flex CSS