20-methode-simple.md

layout	title	permalink
page	Méthode simple	methode-simple.html

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.