Dans les leçons précédentes, nous avons vu comment définir la direction des éléments flexibles, leur ordre et avons appris à les aligner sur leurs axes principal et secondaire.
Le modèle des boites flexibles nous offre une dernière série de propriété qui vont nous permettre de gérer la taille des éléments et de définir leur capacité à grossir et à se rétracter en cas de besoin dans le conteneur, c’est-à-dire définir leur capacité à être « flexible ».
Nous allons dans cette nouvelle leçon nous intéresser aux propriétés flex-grow, flex-shrink et flex-basis ainsi qu’à la propriété raccourcie flex.
Définir une taille de départ pour nos éléments flexibles avec flex-basis
La propriété flex-basis va nous permettre de définir une taille de départ pour les différents éléments d’un conteneur flexible avant distribution éventuelle de l’espace vide du conteneur ou au contraire rétrécissement des éléments.
Nous allons appliquer cette propriété directement aux éléments flexibles et allons pouvoir lui passer une valeur, que nous exprimerons généralement en pourcentage de la taille du conteneur.
Notez ici que la propriété flex-basis ne va définir que la dimension de base d’un élément liée à son axe principal, c’est-à-dire sa largeur si l’axe principal est horizontal et sa hauteur si l’axe principal est vertical.
Cette propriété va par ailleurs surcharger la valeur éventuellement donnée à width ou à height selon que l’axe principal soit horizontal ou vertical.
See the Pen Cours HTML CSS 13.4.1 by Pierre (@pierregiraud) on CodePen.
Ici, nous définissons trois conteneurs flexibles qui contiennent trois éléments flexibles chacun. L’axe principal du premier et du troisième conteneurs est horizontal et l’axe principal du deuxième conteneur est vertical. J’ai précisé une hauteur explicite pour nos conteneurs afin de bien voir l’effet des propriétés que nous allons étudier.
Je définis ensuite un flex-basis : 20% pour chacun des éléments flexibles ainsi qu’un flex-grow : 0 et un flex-shrink : 0 que nous allons étudier ensuite pour interdire à nos éléments de grossir ou rétrécir.
Les éléments de notre premier conteneur vont ainsi avoir une largeur de départ égale à 20% de la largeur du conteneur tandis que les éléments de notre deuxième conteneur auront une hauteur également à 20% de la hauteur du conteneur.
Dans notre troisième conteneur, nous définissons un flex-basis différent pour un élément en particulier. L’élément en question aura donc ici une largeur de départ égale à 30% de celle de son conteneur.
Notez que nous passons également une largeur et une hauteur explicites à chacun des éléments flexibles de notre troisième conteneur. L’axe principal de ce conteneur est l’axe horizontal : la propriété flex-basis va donc nous permettre de définir la largeur de départ des éléments flexibles et la propriété width va être surchargée. La propriété height va en revanche ici bien s’appliquer.
Gérer la capacité des éléments flexibles à grossir avec flex-grow
La propriété flex-grow va nous permettre de définir la capacité des éléments à s’étirer dans leur conteneur pour remplir l’espace vide. Nous allons à nouveau l’appliquer aux éléments flexibles.
On va passer un nombre positif à flex-grow qui va définir la quantité d’espace disponible qu’un élément doit récupérer par rapport aux autres.
La valeur par défaut de flew-grow est 0 ce qui signifie que les éléments n’ont pas le droit de grossir dans leur conteneur.
Reprenons l’exemple précédent et appliquons cette fois-ci un flex-grow : 1 aux éléments flexibles.
See the Pen Cours HTML CSS 13.4.2 by Pierre (@pierregiraud) on CodePen.
Ici, on définit les dimensions de départ de nos éléments ave la propriété flex-basis. Nos éléments auront donc une largeur ou hauteur selon l’axe principal égale à 20% de leur conteneur sauf pour l’élément possédant la classe .ef30 dont la largeur de départ va être égale à 30% du conteneur.
Vous devez bien comprendre ici que flex-basis sert à définir les dimensions de base des éléments flexibles avant un éventuel étirement ou rétrécissement.
On va également laisser la possibilité à nos éléments flexibles de s’étirer pour occuper l’espace vide dans le conteneur avec flew-grow : 1.
L’espace disponible dans le conteneur va donc être équitablement réparti entre les différents éléments de nos deux premiers conteneurs.
Pour notre troisième conteneur, on définit trois comportements de flex-grow différents pour nos trois éléments : notre premier élément va avoir le droit de s’étirer, le deuxième n’aura pas le droit, et le troisième aura le droit et va essayer de récupérer une quantité de l’espace restant dans le conteneur 3 fois plus importante que le premier élément.
Si vous êtes familiers des mathématiques, vous pouvez considérer que les nombres passés à flex-grow représentent une pondération. Sinon, retenez simplement que les nombres passés à flex-grow vont définir combien d’espace libre un élément peut avaler par rapport aux autres éléments.
Gérer la capacité des éléments flexibles à rétrécir avec flex-shrink
En plus de pouvoir gérer la capacité des éléments à grossir pour absorber l’espace vide dans un conteneur, nous allons également pouvoir gérer leur capacité à rétrécir pour éviter que des éléments ne dépassent du conteneur avec la propriété flex-shrink.
Cette propriété va s’utiliser de manière similaire à la précédente : nous allons à nouveau pouvoir passer un nombre positif à flex-shrink qui va indiquer la capacité des éléments à rétrécir ainsi que l’importance de leur rétrécissement les uns par rapport aux autres.
Cependant, à la différence de flex-grow, la valeur par défaut de flex-shrink est 1 ce qui correspond à laisser la capacité aux éléments de rétrécir.
Notez par ailleurs qu’un élément ne va pouvoir rétrécir que jusqu’au point où son contenu est prêt à dépasser de l’élément.
See the Pen Cours HTML CSS 13.4.3 by Pierre (@pierregiraud) on CodePen.
Cette fois-ci, on définit une taille de base de 40% pour chacun de nos éléments avec flex-basis : 40% et de 60% pour un élément en particulier dans le troisième conteneur.
On interdit également aux éléments de se placer sur plusieurs lignes ou sur plusieurs colonnes en passant la valeur nowrap pour la propriété flex-wrap aux différents conteneurs afin que les éléments dépassent bien par défaut de leur conteneur.
Finalement, on laisse la possibilité aux éléments de rétrécir afin qu’ils essaient de ne pas dépasser du conteneur avec flex-shrink : 1.
Dans notre troisième conteneur, nous définissons des comportements de rétrécissement différents pour chacun de nos éléments flexibles : le premier élément va pouvoir rétrécir selon un flex-shrink : 1, le deuxième ne pourra pas rétrécir et le troisième va également pouvoir rétrécir selon un flex-shrink : 3, ce qui signifie qu’il va essayer de rétrécir 3 fois plus que le premier élément flexible du conteneur.
La notation raccourcie flex
Nous allons pouvoir définir les trois propriétés flex-grow, flex-shrink et flex-basis d’un coup en utilisant la propriété raccourcie flex.
Pour que la propriété fonctionne correctement, il faudra lui passer d’abord la valeur liée à flex-grow, puis celle de flex-shrink et finalement celle de flex-basis.
Faites bien attention une nouvelle fois avec l’utilisation des propriétés raccourcies : si l’une des valeurs de la propriété raccourcie a été définie avant alors elle sera écrasée par la valeur de la propriété raccourcie.
See the Pen Cours HTML CSS 13.4.4 by Pierre (@pierregiraud) on CodePen.
Précédent
Suivant
