Inline
Põe as peças lado a lado e quebra a linha quando não cabem.
Nesta página
Playground
123
Espaço (gap)
Distribuição
Peças
Fundo
<div class="feitio-inline" 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 3Peça 4
Inline
Quatro peças a space-2.
Mostrar código
<div class="feitio-inline" data-gap="2">
…
</div><Inline gap={2}>
…
</Inline>1234567891011121314
Quebrando a linha
Quando as peças não cabem, a linha quebra, e o mesmo espaço vale entre as linhas: nada encosta.
Mostrar código
<div class="feitio-inline" data-gap="3">
…
</div>12
Espalhado
data-justify="between" leva a primeira peça para um lado e a última para o outro, como um título e a sua ação.
Mostrar código
<div class="feitio-inline" data-gap="3" data-justify="between">
<h2>…</h2>
<button class="feitio-button">…</button>
</div>Atributos
| Atributo | Valores | Para quê |
|---|---|---|
class="feitio-inline" | obrigatório | O layout. |
data-gap | 1 a 7 | O espaço entre as peças. No React, nenhum outro valor compila. |
justify | "between", "end" | Como as peças se distribuem na linha. |
As regras e um formulário inteiro montado com os três estão em Layout.