Disposition flex
Introduction
Le mode d'affichage flex est un moyen moderne d'afficher des éléments un à côté de l'autre dans votre page Web. Ils existent et sont standard dans les navigateurs depuis autour des années 2015. Par le passé, il y avait d'autres méthodes pour mettre des éléments un à côté de l'autre, mais ces méthodes étaient plus compliqué et venaient avec beaucoup d'inconvénient. Le flex est venu tout changer pour le mieux. Les flex sont un changement très apprécié des programmeurs web.
Nous utiliserons les Flexbox pour toutes sortes de choses. Entre autres, et le plus important, pour afficher des éléments un à côté de l'autre, mais aussi pour afficher des cartes qui peuvent se mettre sur plusieurs lignes, pour centrer un élément autant verticalement qu'horizontalement ou encore pour pousser un <footer> au bas de notre page Web.
Les flex peuvent être un peu intimidants puisqu'ils nécessitent beaucoup de propriétés CSS pour se configurer. Si vous les maîtrisez, ils sont toutefois très facile à utiliser et facileront énormément votre travail.
Changement d'affichage
Pour afficher des éléments à la manière de flex, nous utiliserons la propriété display: flex. Il faut comprendre que c'est le conteneur des éléments que vous voulez placer un à côté de l'autre qui doit être spécifié en flex. En mettant le conteneur en flex, il modifiera l'affichage de ses éléments enfants. Ceci est différent des types d'affichage conventionnel commme inline ou block qui affecte l'élément spécifié directement.
Dans l'exemple ci-dessus, vous noterez que seulement le conteneur est marqué comme flex. L'affichage du conteneur force tous les éléments à l'intérieur à être placés les uns à côté des autres et ce, malgré leur propre mode d'affichage. Bref, même si les boîtes à l'intérieur du conteneur sont affiché en block, le fait que leur conteneur est en flex les forcera les à changer leur affichage.
Il est aussi important de noter qu'autrement, le conteneur en flex fonctionne comme un affichage en block.
Axe d'Affichage
Les flex sont une façon d'afficher les éléments sur un axe. Par défaut, l'axe est de gauche à droite. C'est pour cette raison que les éléments se retrouvent les uns à côté des autres de gauche à droite.
L'axe n'est pas obligé d'être de gauche à droite. Nous pouvons le manipuler dans 3 autres directions différentes, soit de droite à gauche, de haut en bas et de bas en haut. Pour ce faire, nous utiliserons la propriété flex-direction sur le conteneur qui est en flex.
Voici un tableau des valeurs disponible pour la propriété flex-direction:
| Valeur | Description |
|---|---|
| row (valeur var défaut) | Axe de gauche à droite |
| column | Axe de haut en bas |
| row-reverse | Axe de droite à gauche |
| column-reverse | Axe de bas en haut |
Axe multiligne
Par défaut l'axe d'un conteneur flex ne s'étire pas sur plusieurs ligne comme du texte. Bref, si vous remplissez l'axe complètement avec des éléments et qu'ils débordent de l'axe, ceux-ci risquent d'avoir un comportement très bizarre, comme se compresser ou déborder à l'extérieur de l'axe. Nous voulons toujours éviter ce genre de comportement de débordement lorsque nous faisons du CSS. Pour résoudre ce problème, nous avons 2 solutions possibles:
- Enlever des éléments sur l'axe et les mettre ailleurs pour que l'affichage soit correct.
- Forcer l'axe à pouvoir se mettre sur plusieurs lignes, comme le texte.
Pour forcer l'axe à ce mettre sur plusieurs lignes, nous utiliserons la propriété et la valeur flex-wrap: wrap;.
Espacement
Jusqu'à présent, pour mettre de l'espace entre nos éléments dans notre conteneur flex, nous avons ajouté un margin à nos élément. Il est toutefois possible de définir cet espace à l'aide de la propriété gap du conteneur flex. Cette propriété permet de définir l'espace entre les éléments à l'intérieur d'un conteneur flex, ce qui peut remplacer le margin. À vous de voir lequel vous préférez utiliser dans vos flex, mais le gap nous permet définitivement quelques options supplémentaires.
Une option supplémentaire que le gap nous permet de faire par rapport au margin est démontré ci-dessus. Il nous permet de contrôler l'espacement entre les éléments et l'espacement entre les éléments et le conteneur de façon indépendante en l'utilisant avec le padding.
Alignement sur l'axe
Il arrive très fréquement que les éléments à l'intérieur d'un conteneur flex n'aient pas tous la même hauteur. Lorsque c'est le cas, on observera un comportement particulier de ces éléments:
Dans l'exemple ci-dessus, vous noterez que les éléments moins haut s'étire pour prendre toute l'espace en dessous d'eux. C'est parce par défaut, l'alignement des éléments en CSS est en stretch. Il est toutefois possible de changer ce comportement avec la propriété align-items.
La propriété align-items se mets directement sur le conteneur flex. Elle contrôlera comment les éléments s'aligne sur l'axe les uns par rapport aux autres. Dans l'exemple ci-dessus, on le spécifie à center, ce qui aligne au centre tous les éléments les uns par rapport aux autres.
Voici un liste des différents alignements disponibles avec un exemple pour mieux le visualiser:
Gérer l'espace vide
Lorsque nous mettons des éléments sur un axe dans un flex, il peut arriver que nous ne mettions pas beaucoup d'éléments et que l'axe se retrouve avec beaucoup d'espace vide vers sa fin.
Par défaut, l'espace vide se retrouve toujours à la fin de l'axe, mais il est possible de déplacer cet espace vide et même de le répartir à plusieurs endroits sur l'axe. Pour ce faire, nous utiliserons la propriété justify-content de la façon suivante:
La propriété justify-content se mets directement sur le conteneur flex. Elle contrôlera comment l'espace sur l'axe flex est disposé. Dans l'exemple ci-dessus, on justifie les éléments à la fin de l'axe, ce qui force l'espace à se retrouver au début de l'axe.
La valeur par défaut du justify-content est flex-start. Voici un liste des différentes justifications disponibles avec un exemple pour mieux le visualiser:
Autres ressources
Il existe de nombreuses autres fonctions des flex. Il est en effet entre autre possible de changer l'ordre ou la taille des éléments dans un conteneur flex sans même modifier le HTML. Je ne couvrirai pas ces situations ici, mais si cela vous intéresse, vous pourrez aller faire quelques recherches sur le Web. Autrement, si les flex restent un mystère pour vous ou si vous désirez simplement approfondir ou solidifier vos connaissances, je vous suggère fortement les ressources suivantes: