Aide-mémoire sur la mise en page CSS Flexbox
Cette page fournit un aide-mémoire visuel pour la mise en page CSS Flexbox, incluant les propriétés du conteneur, les propriétés des éléments et des exemples de mise en page classiques.
Propriétés du Conteneur
| Propriété | Valeur | Description |
|---|---|---|
display |
flex |
Active la mise en page flexible |
flex-direction |
row |
L’axe principal est horizontal, point de départ à gauche |
row-reverse |
L’axe principal est horizontal, point de départ à droite | |
column |
L’axe principal est vertical, point de départ en haut | |
column-reverse |
L’axe principal est vertical, point de départ en bas | |
flex-wrap |
nowrap |
Valeur par défaut, les éléments sont sur une seule ligne |
wrap |
Les éléments passent à la ligne | |
wrap-reverse |
Les éléments passent à la ligne en sens inverse | |
justify-content |
flex-start |
Alignement sur l’axe principal : aligné à gauche |
flex-end |
Alignement sur l’axe principal : aligné à droite | |
center |
Alignement sur l’axe principal : centré | |
space-between |
Alignement sur l’axe principal : justifié, avec un espace égal entre les éléments | |
space-around |
Alignement sur l’axe principal : espace égal autour des éléments | |
align-items |
flex-start |
Alignement sur l’axe secondaire : aligné en haut |
flex-end |
Alignement sur l’axe secondaire : aligné en bas | |
center |
Alignement sur l’axe secondaire : centré | |
baseline |
Alignement sur l’axe secondaire : aligné sur la ligne de base du texte | |
stretch |
Valeur par défaut, alignement sur l’axe secondaire : étiré pour remplir le conteneur | |
align-content |
flex-start |
Alignement sur l’axe secondaire (plusieurs lignes) : aligné en haut |
flex-end |
Alignement sur l’axe secondaire (plusieurs lignes) : aligné en bas | |
center |
Alignement sur l’axe secondaire (plusieurs lignes) : centré | |
space-between |
Alignement sur l’axe secondaire (plusieurs lignes) : justifié, avec un espace égal entre les lignes | |
space-around |
Alignement sur l’axe secondaire (plusieurs lignes) : espace égal autour des lignes | |
stretch |
Valeur par défaut, alignement sur l’axe secondaire (plusieurs lignes) : étiré pour remplir l’espace restant |
Propriétés des Éléments (Items)
| Propriété | Valeur | Description |
|---|---|---|
flex-grow |
nombre |
Définit la capacité d’un élément à s’agrandir, 0 par défaut (ne s’agrandit pas) |
flex-shrink |
nombre |
Définit la capacité d’un élément à rétrécir, 1 par défaut |
flex-basis |
auto |
Définit la taille par défaut d’un élément avant la distribution de l’espace restant |
align-self |
auto |
Permet d’aligner un élément individuellement, écrase la propriété align-items |
flex-start |
L’élément est placé au début du conteneur | |
flex-end |
L’élément est placé à la fin du conteneur | |
center |
L’élément est placé au centre | |
baseline |
L’élément est aligné sur la ligne de base du conteneur | |
stretch |
L’élément est étiré pour remplir le conteneur (si celui-ci a une hauteur) |
Exemples de Mise en Page Classiques
| Mise en page | Propriétés du conteneur | Propriétés de l’élément |
|---|---|---|
| Barre de navigation horizontale | display: flex;justify-content: space-around; |
|
| Barre latérale verticale | display: flex;flex-direction: column;justify-content: flex-start; |
|
| Mise en page en grille | display: flex;flex-wrap: wrap;justify-content: space-between; |
flex: 1 0 21%; |
| Mise en page en cartes | display: flex;flex-wrap: wrap;justify-content: space-around; |
flex: 0 1 calc(33.333% - 10px); |