Rows with Flexbox · Lignes avec Flexbox
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · Cette page nécessite un navigateur récent (avec support SharedArrayBuffer). Veuillez mettre à jour Chrome, Edge, Firefox ou Safari vers la dernière version.
English
Putting boxes in a row
- By default, boxes stack downward. Often you want them side by side.
- Flexbox is the easy way to do that.
- Put
display: flex;on the container — the box that holds the others — and its children line up in a row.
Français
Placer des boîtes en ligne
- Par défaut, les boîtes s'empilent vers le bas. Souvent, vous voulez qu'elles soient côte à côte.
- Flexbox est le moyen facile de faire cela.
- Placez
display: flex;sur le conteneur — la boîte qui contient les autres — et ses enfants s'alignent en ligne.
English
Spacing them out
- Once a box is
display: flex;, you control how its children spread. justify-content: space-between;pushes them apart, with gaps between.gap: 12px;adds an even space between every child.
Français
Les espacer
- Une fois qu'une boîte est
display: flex;, vous contrôlez comment ses enfants se dispersent. justify-content: space-between;les éloigne, avec des espaces entre eux.gap: 12px;ajoute un espace égal entre chaque enfant.
<style>
.bar { display: flex; justify-content: space-between; }
.btn { background-color: #6c5; padding: 10px 16px; }
</style>
<div class="bar">
<span class="btn">Home</span>
<span class="btn">About</span>
<span class="btn">Contact</span>
</div>
English
Common mistakes
display: flexgoes on the container, not on the items.justify-contentspaces items along the row.
Français
Erreurs courantes
display: flexva sur le conteneur, pas sur les éléments.justify-contentespace les éléments le long de la ligne.
English
Now you try
display: flexgoes on the container, not the items.- Turn a box into a row, then spread its children out.
Français
À vous maintenant
display: flexva sur le conteneur, pas sur les éléments.- Transformez une boîte en ligne, puis éparpillez ses enfants.
Explore · Explorer
Flexbox lays out a row · Flexbox met en page une ligne
justify-content spaces items along the row; align-items across it. · justify-content espace les éléments le long de la ligne ; align-items transversalement.
Put the three boxes side by side. Add display: flex; to the .row rule. · Placez les trois boîtes côte à côte. Ajoutez display: flex; à la règle .row.
Spread the boxes evenly across the row. Add justify-content: space-between; to the .row rule. · Répartissez uniformément les boîtes sur la ligne. Ajoutez justify-content: space-between; à la règle .row.