Taille de l'élément flex le long de l'axe principal

Les propriétés width et height définissent la largeur et la hauteur de l'élément flex indépendamment de la direction des axes. Autrement dit, si l'axe est horizontal, width définira la largeur, mais si l'axe est vertical, width continuera à définir la largeur. Parfois, ce comportement n'est pas pratique.

Dans le modèle flex, il existe une propriété spéciale flex-basis, qui définit la taille de l'élément le long de l'axe principal. Cela signifie que si l'axe principal est horizontal - cette propriété définira la largeur des éléments, et s'il est vertical - alors la hauteur. Cette propriété doit être définie sur les éléments flex eux-mêmes, et non sur leur parent. Regardons des exemples.

Supposons que l'axe principal est maintenant horizontal, et que flex-basis a la valeur 50px. Dans ce cas, la largeur des éléments sera de 50px :

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
</div>

.parent {
	display: flex;
	flex-direction: row; /* axe horizontal */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;   /* taille de l'élément */
	border: 1px solid green;
}

Inversons maintenant l'axe, sans changer la valeur de la propriété flex-basis. Dans ce cas, ce sera la hauteur des éléments qui sera de 50px :

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
</div>

.parent {
	display: flex;
	flex-direction: column; /* axe vertical */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;
	border: 1px solid green;
}

Créez 5 blocs flex. Définissez leur largeur le long de l'axe principal à 100px. Observez le comportement des blocs le long de différents axes.

Si l'axe est horizontal et que la propriété flex-basis est définie pour un bloc ainsi que la propriété width, alors flex-basis aura la priorité. Vérifiez ceci.

Si l'axe est vertical et que la propriété flex-basis est définie pour un bloc ainsi que la propriété height, alors flex-basis aura la priorité. Vérifiez ceci.