Méthode simple
Une méthode simple, qui permet d’aligner des éléments horizontalement en leur donnant une largeur égale:
.row { display: flex; }
.row > * { flex: 1; }
Il est inutile de préciser la propriété flex-direction
, car flex-direction: row
est la valeur par défaut de flexbox.
Le réglage flex:1
permet de donner une largeur égale à tous les éléments, et d’assurer qu’ils remplissent l’espace disponible.
C’est une écriture courte, qui correspond aux trois propriétés suivantes:
.item {
flex-grow: 1; /* au lieu de la valeur par défaut, qui est de 0 */
flex-shrink: 1; /* correspond à la valeur par défaut */
flex-basis: 0; /* au lieu de la valeur par défaut, qui est "auto" */
}
Un exemple
See the Pen flexbox defaults on CodePen.