# Inline

Mets les pièces côte à côte et enroule quand elles ne tiennent pas.

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

## Quand l'utiliser

-   Quand il y a un espace entre les éléments : l'espace appartient au parent, et n'est qu'un pas de l'échelle.

## Quand ne pas l'utiliser

-   **Pour le remplissage interne d'un composant :** il est prêt.
-   **Avec une marge manuscrite à côté :** jamais ; la vérification l'échoue.

## Exemples

### En ligne

Quatre pièces à `space-2`.

Afficher le code

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

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

### Passage à la ligne

Quand les éléments ne tiennent pas, la ligne passe à la suivante, et le même espace vaut entre les lignes : rien ne se touche.

Afficher le code

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

### Réparti

`data-justify="between"` envoie le premier élément d’un côté et le dernier de l’autre, comme un titre et son action.

Afficher le code

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

## Attributs

Attribut

Valeurs

Pour quoi

`class="feitio-inline"`

obligatoire

Mise en page.

`data-gap`

`1` à `7`

L'espace entre les éléments. Dans React, aucune autre valeur ne compile.

`justify`

`"between"`, `"end"`

Comment les pièces se répartissent le long de la ligne.

Les règles et un formulaire complet construit avec les trois sont dans [Mise en page](/fr/dev/layout/).