Stack
Empilha as peças, uma embaixo da outra, com o mesmo espaço da régua entre todas.
Nesta página
Playground
123
Espaço (gap)
Alinhamento
Fundo
<div class="feitio-stack" data-gap="1"><span class="lay-box">1</span><span class="lay-box">2</span><span class="lay-box">3</span></div>Quando usar
- Sempre que houver espaço entre peças: o espaço é do pai, e só um passo da régua.
Quando não usar
- Para o recuo de dentro de um componente: ele já vem pronto.
- Com uma margem escrita à mão junto: nunca; a checagem reprova.
Exemplos
Peça 1Peça 2Peça 3
Stack
Três peças a space-3.
Mostrar código
<div class="feitio-stack" data-gap="3">
…
</div><Stack gap={3}>
…
</Stack>12
34
Um espaço por nível
Quanto mais perto, mais junto: entre as partes, um espaço grande (6); dentro de cada parte, um pequeno (2). Um Stack dentro do outro, cada um com o seu.
Mostrar código
<div class="feitio-stack" data-gap="6">
<div class="feitio-stack" data-gap="2">…</div>
<div class="feitio-stack" data-gap="2">…</div>
</div>Atributos
| Atributo | Valores | Para quê |
|---|---|---|
class="feitio-stack" | obrigatório | O layout. |
data-gap | 1 a 7 | O espaço entre as peças. No React, nenhum outro valor compila. |
align | "start", "center" | Como as peças se alinham na horizontal. |
As regras e um formulário inteiro montado com os três estão em Layout.