Inline
Mets les pièces côte à côte et enroule quand elles ne tiennent pas.
Sur cette page
Playground
123
Espace (gap)
Répartition
Éléments
Fond
<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
Pièce 1Pièce 2Pièce 3Pièce 4
En ligne
Quatre pièces à space-2.
Afficher le code
<div class="feitio-inline" data-gap="2">
…
</div><Inline gap={2}>
…
</Inline>1234567891011121314
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
<div class="feitio-inline" data-gap="3">
…
</div>12
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
<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.