Flexbox définit un modèle de boîte avec display:flex, toutes les balises peuvent devenir des flexbox.
Le modèle flexbox (boîte flexible) c'est:
- un flex-container, il crée un contexte général d'affichage pour ses enfants
- des flex-items, ce sont les enfants directs du container
Une balise peut devenir un flex-container et crée de la sorte un contexte d'affichage général pour ses enfants directs.
Les enfants directs d'un flex-container ne doivent pas être déclarés, ils deviennent automatiquement des flex-items dont la taille est celle de leur contenu.
La propriété display permet de créer un environnement flexbox.
display |
display:flex |
L'élément est maintenant un flex-container et se comporte comme un block |
Exemple |
display:inline-flex |
L'élément est maintenant un flex-container et se comporte comme un inline-block |
Exemple |
La propriété flex-direction permet d'orienter l'affichage des flex-items selon un axe primaire horizontal ou vertical.
flex-direction |
flex-direction:row |
horizontal, valeur par défaut |
Exemple |
flex-direction:row-reverse |
horizontal inversé |
Exemple |
flex-direction:column |
vertical |
Exemple |
flex-direction:column-reverse |
vertical inversé |
Exemple |
La propriété flex-wrap permet de spécifier si les flex-items sont disposés sur une ligne/colonne ou peuvent être disposés sur plusieurs lignes/colonnes, et donc passer à la ligne en quelque sorte.
flex-wrap |
flex-wrap:nowrap |
pas de retour à la ligne, valeur par défaut |
Exemple
Exemple
|
flex-wrap:wrap |
retour à la ligne autorisé |
Exemple
Exemple
|
flex-wrap:wrap-reverse |
retour à la ligne dans le sens inverse |
Exemple
Exemple
|
Avec nowrap on constate que les div enfants du container se contractent de plus en plus, lorsque la contraction est devenue impossible, on a un dépassement.
Avec wrap on constate que les div enfants du container ne se contractent pas, si le container devient trop petit il y a passage à la ligne/colonne.
La propriété flex-flow regoupe flex-direction et flex-wrap, dans cet ordre, les 2 valeurs sépares par un espace.
Exemple: flex-flow:column wrap
La propriété justify-content permet de spécifier un alignement des flex-items sur l'axe primaire du flex-container.
justify-content |
justify-content:flex-start |
alignement à gauche (ou en haut) dans le container, valeur par défaut |
Exemple
|
justify-content:flex-end |
alignement à droite (ou en bas) dans le container |
Exemple
|
justify-content:center |
alignement au milieu dans le container |
Exemple
|
justify-content:space-between |
alignement justifié sur toute la largeur (ou la hauteur) du container |
Exemple
|
justify-content:space-around |
alignement justifié avec création d'espace sur toute la largeur (ou la hauteur) du container |
Exemple
|
La propriété align-items permet d'aligner les flex-items sur l'axe secondaire du flex-container.
align-items |
align-items:stretch |
éléments étirés sur l'axe secondaire, valeur par défaut |
Exemple
|
align-items:flex-start |
alignement à gauche (ou en haut) sur l'axe secondaire |
Exemple
|
align-items:flex-end |
alignement à droite (ou en bas) sur l'axe secondaire |
Exemple
|
align-items:center |
alignement centré sur l'axe secondaire |
Exemple
|
align-items:baseline |
idem flex-start si la police de caractères est la même |
Exemple
|
La propriété align-content permet de définir l'alignement des rangées sur l'axe secondaire, cette propriétés n'est donc active que dans le cas où le flex-container
autorise le passage à la ligne.
align-content |
align-content:stretch |
éléments occupent tout l'espace disponible du container, valeur par défaut |
Exemple
|
align-content:flex-start |
éléments se placent au début du container |
Exemple
|
align-content:flex-end |
éléments se placent à la fin du container |
Exemple
|
align-content:center |
éléments se placent au centre du container |
Exemple
|
align-content:space-between |
éléments sont justifiés dans le container |
Exemple
|
align-content:space-around |
idem, avec des espaces rajoutés |
Exemple
|