# Inline

Põe as peças lado a lado e quebra a linha quando não cabem.

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

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

### Inline

Quatro peças a `space-2`.

Mostrar código

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

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

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

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

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

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