Propriété flex
La propriété flex est un raccourci pour flex-basis,
flex-shrink
et flex-grow.
S'applique à : un élément flex spécifique.
L'ordre des valeurs n'a pas d'importance. Les deuxième et troisième
paramètres (flex-shrink, flex-basis)
sont optionnels.
Valeurs
Voir les propriétés correspondantes.
Valeur par défaut : 0 1 auto.
Exemple
Supposons que nous ayons 3 éléments. La largeur de chacun d'eux
est de 200px et leur total est de 600px,
ce qui est supérieur à la largeur du conteneur parent, qui
est de 300px. Attribuons au premier élément une largeur de
200px, au deuxième élément - 300px, et au
troisième élément - 100px. Pour tous les éléments,
la valeur de flex-basis sera de 1,
et flex-shrink - 1, 2, 3 respectivement
au numéro d'ordre de l'élément :
<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
<div class="child elem2">3</div>
</div>
.parent {
display: flex;
width: 350px;
height: 200px;
border: 1px solid red;
}
.child {
width: 200px;
height: 50px;
border: 1px solid green;
}
.elem1 {
flex: 200px 1 1;
}
.elem2 {
flex: 300px 1 2;
}
.elem3 {
flex: 100px 1 3;
}
:
Voir aussi
-
la propriété
flex-direction,
qui définit la direction des axes des éléments 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 transversal -
la propriété
flex-wrap,
qui définit le retour à la ligne des éléments flex -
la propriété
flex-flow,
raccourci pour flex-direction et flex-wrap -
la propriété
order,
qui définit l'ordre des éléments flex -
la propriété
align-self,
qui définit l'alignement d'un seul élément -
la propriété
flex-basis,
qui définit la taille d'un élément flex spécifique -
la propriété
flex-grow,
qui définit la capacité d'expansion des éléments flex -
la propriété
flex-shrink,
qui définit la capacité de rétrécissement des éléments flex
