Propriété flex-basis

La propriété flex-basis définit la taille d'un bloc flex spécifique avant que les autres propriétés flex ne lui soient appliquées. En général, la propriété 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.

S'applique à un bloc flex spécifique.

Cette propriété fait partie intégrante de la propriété raccourcie flex.

Syntaxe

sélecteur {
	flex-basis: toutes les unités CSS (et pourcentages) | auto;
}

Valeur par défaut : auto.

Exemple

Supposons que l'axe principal soit horizontal, et que flex-basis ait 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;
}

Exemple

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;
}

Voir aussi

la propriété flex-direction,
qui définit la direction des axes des blocs flex
la propriété justify-content,
qui définit l'alignement le long de l'axe principal
la propriété align-items,
qui définit l'alignement le long de l'axe secondaire
la propriété flex-wrap,
qui définit le retour à la ligne des blocs flex
la propriété flex-flow,
raccourci pour flex-direction et flex-wrap
la propriété order,
qui définit l'ordre des blocs flex
la propriété align-self,
qui définit l'alignement d'un seul bloc
la propriété flex-grow,
qui définit l'expansion des blocs flex
la propriété flex-shrink,
qui définit la contraction des blocs flex
la propriété flex,
raccourci pour flex-grow, flex-shrink et flex-basis