Flexbox introductionContrairement aux autres valeurs de display (display: inline, display: none, display: bloc) qui influencent uniquement l'affichage des éléments par rapport aux autres dans la page, la propriété display: flex; ou display: inline-flex; influence l'affichage de ses enfants en les positionnant dans un corridor sur l'axe des X ou Y, en modifiant leur dimension, leur ordre, etc. afin de remplir l'espace disponible le plus adéquatement possible.
Il faut d'abord déclarer la propriété display: flex; sur l'élément parent pour que les enfants soient affectés par les propriétés de Flexbox.
Comme son nom l'indique, la valeur de cette propriété définit la direction qu'auront ses enfants.
Valeurs possibles:
- row➡️ (par défaut)
- row-reverse⬅️
- column⬇️
- column-reverse ⬆️
flex-direction: row vs column
À gauche, flex-direction: row;
À droite, flex-direction: column;
flex-direction: row-reverse vs column-reverse
À gauche, flex-direction: row-reverse;
À droite, flex-direction: column-reverse;
Un peu comme Word ou Google Doc, flexbox vous permet de justifier votre contenu horizontalement ↔️ afin atteindre l'affichage désiré.
Possibilités:
- flex-start(par défaut)
- flex-end
- space-between
- space-around
- space-evenly
- etc.
justify-content: flex-start vs justify-content: flex-end
À gauche, justify-content: flex-start;
À droite, justify-content: flex-end;
justify-content: center vs justify-content: space-between
.À gauche, justify-content: center;
À droite, justify-content: space-between;
justify-content: space-around vs justify-content: space-evenly
À gauche, justify-content: space-around;
À droite, justify-content: space-evenly;
Ces deux valeurs peuvent se ressembler dans un espace restreint, mais remarquer comment avec justify-content: space-around; chaque élément a un espace équivalent à gauche et à droite et comment l'espace de chacun des éléments s'additionne.
Tandis qu'en justify-content: space-evenly; l'espace n'est pas additionné, mais plutôt jumelé afin de créer des espaces identiques entre chaque élément.
Dans la même lignée que justify-content, mais cette fois à la verticale ↕️.
Possibilités:
- stretch(par défaut)
- flex-start
- flex-end
- center
- etc.
align-items: stretch vs align-items: center
À gauche, align-items: stretch;
À droite, align-items: center;
align-items: flex-start vs align-items: flex-end
À gauche, align-items: flex-start;
À gauche, align-items: flex-end;
La propriété align-self est pratiquement identique à la propriété align-items à la différence qu'elle s'applique sur un élément en particulier, et non le parent, afin de l'aligner de façon différente aux autres.
Elle accepte aussi les valeurs:
- stretch
- flex-start
- flex-end
- center
- etc.
Centrer un ou des éléments dans le body.
Pour centrer un élément verticalement dans le body, vous devez utilisez un de ces deux procédés afin de forcer le body à occuper toute la hauteur et ainsi pouvoir centrer l'élément dans la hauteur totale de la fenêtre.
Et si vous vouslez center verticalement les éléments dans div à l'intérieur du body et que ce divqui ne prend pas toute la hauteur du body, il vous faudra aussi forcer sa hauteur.
L'inspecteur est d'une aide précieuse lorsque l'on manipule les éléments flexbox. Dans le DOM tree, les éléments en display: flex; ou display: inline-flex; sont mis en évidence grâce à un badge contenant le mot "flex". Lorsque cliqué, ce badge met en évidence la zone prise dans la page par le flexbox en question.
Lorsque l'on examine les propriétés CSS appliquées à cet élément on remarque à la droite de la propriété display un icône rappelant une grille. Lorsque cliqué, cet icône affiche différentes propriétés en lien avec flexbox, par exemple: flex-direction, justify-content, align-items, etc. Les valeurs disponibles pour ces propriétés sont illustrées avec des icônes permettant d'identifier ou de tester rapidement la valeur souhaitée.