# Inline

Pone piezas una al lado de la otra y envuelve cuando no caben.

## Playground

```html
<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

### En línea

Cuatro piezas en `space-2`.

Mostrar código

```html
<div class="feitio-inline" data-gap="2">
  …
</div>
```

```jsx
<Inline gap={2}>
  …
</Inline>
```

### 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

```html
<div class="feitio-inline" data-gap="3">
  …
</div>
```

### 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

```html
<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](/es/dev/layout/).