# Stack

Les éléments sont empilés les uns sous les autres, avec un espace d'échelle identique entre chacun.

## Playground

```html
<div class="feitio-stack" 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

### Empilement

Trois pièces à `space-3`.

Afficher le code

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

```jsx
<Stack gap={3}>
  …
</Stack>
```

### Un espace par niveau

Plus c’est proche, plus c’est lié : entre les parties, un grand espace (6) ; dans chaque partie, un petit (2). Un Stack dans l’autre, chacun avec le sien.

Afficher le code

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

## Attributs

Attribut

Valeurs

Pour quoi

`class="feitio-stack"`

obligatoire

Mise en page.

`data-gap`

`1` à `7`

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

`align`

`"start"`, `"center"`

Alignement horizontal des éléments.

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