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:block Exemple
Les éléments de classe ^item se comportent façon block. |
| On passe en display flex et le comportement des balises de classe ^item change:
|
display:flex Exemple
L'élément de classe main est maintenant un flex-container, les éléments de classe item se comportent comme des flex-items. |
display:inline-flex Exemple
Permet de disposer des containers flex les uns à côté des autres. |
Il existe 2 axes:
- Axe primaire: l'axe horizontal
- Axe secondaire: l'axe vertical
La propriété flex-direction permet d'orienter l'affichage des flex-items selon l'axe primaire.
flex-direction:row
Exemple
horizontal, valeur par défaut |
flex-direction:row-reverse
Exemple
horizontal inversé |
flex-direction:column ATTENTION:Inversion des axes: l'axe primaire devient vertical et le secondaire horizontale.
Exemple
vertical |
flex-direction:column-reverse ATTENTION: Inversion des axes: l'axe primaire devient vertical et le secondaire horizontale.
Exemple
vertical inversé |
justify-content, pour aligner sur l'axe primaire
La propriété justify-content permet l'alignement des items sur l'axe primaire du container.
justify-content:flex-start c'est la valeur par défaut.
Exemple
alignement à gauche (ou en haut) dans le container, valeur par défaut |
| justify-content:flex-end
Exemple
alignement à droite (ou en bas) dans le container |
| justify-content:center
Exemple
alignement au milieu dans le container |
justify-content:space-between
Exemple
Premier et dernier item collés sur les bords, les autres items sont répartis sur l'espace restant. |
justify-content:space-around
Exemple
Chaque item est réparti sur l'espace en plaçant un espace égale à gauche et à droite de celui-ci. |
justify-content:space-evenly
Exemple
Même espace entre chaque item. |
align-items, pour aligner sur l'axe secondaire
La propriété align-items permet l'alignement des items sur l'axe secondaire d'une ligne flexible.
S'il y a plusieurs lignes flexibles, l'alignement de ces lignes dans le flex-container se fait avec align-content, pour utiliser align-content il faut donc plusieurs lignes.
align-items:stretch, valeur par défautATTENTION: il y a étirement si l'item n'a pas de valeur pour height.
Exemple
éléments étirés sur l'axe secondaire, valeur par défaut |
align-items:flex-start
Exemple
alignement à gauche (ou en haut) sur l'axe secondaire |
align-items:flex-end
Exemple
alignement à droite (ou en bas) sur l'axe secondaire |
align-items:center
Exemple
alignement centré sur l'axe secondaire |
align-items:baseline
Exemple
L'alignement se fait sur le texte (!!!l'exemple ne fonctionne pas!!!) |
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.
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é align-content permet de définir l'alignement des rangées (ou lignes flexibles) 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:stretch
Exemple
Répartition sur toute la hauteur de la ligne flexible, valeur par défaut |
align-content:flex-start
Exemple
éléments se placent au début du container |
align-content:flex-end
Exemple
éléments se placent à la fin du container |
align-content:center
Exemple
éléments se placent au centre du container |
align-content:space-between
Exemple
éléments sont justifiés dans le container |
align-content:space-around
Exemple
idem, avec des espaces rajoutés |
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
