Inline
Pone piezas una al lado de la otra y envuelve cuando no caben.
En esta página
Playground
123
Espacio (gap)
Distribución
Piezas
Fondo
<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>Cuándo usarlo
- Cada vez que hay espacio entre piezas: el espacio pertenece al padre, y solo un paso de la escala.
Cuándo no usarlo
- Para el relleno interno de un componente: viene listo.
- Con un margen a mano al lado: nunca; la comprobación lo falla.
Ejemplos
Pieza 1Pieza 2Pieza 3Pieza 4
En línea
Cuatro piezas en space-2.
Mostrar código
<div class="feitio-inline" data-gap="2">
…
</div><Inline gap={2}>
…
</Inline>1234567891011121314
Saltando de línea
Cuando las piezas no caben, la línea salta, y el mismo espacio vale entre líneas: nada se toca.
Mostrar código
<div class="feitio-inline" data-gap="3">
…
</div>12
Repartido
data-justify="between" lleva la primera pieza a un lado y la última al otro, como un título y su acción.
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é sirve |
|---|---|---|
class="feitio-inline" | obligatorio | El diseño. |
data-gap | 1 a 7 | El espacio entre piezas. En React, ningún otro valor se compila. |
justify | "between", "end" | ¿Cómo se distribuyen las piezas a lo largo de la línea. |
Las reglas y un formulario completo construido con los tres están en Layout.