Le Module Flexbox permet de contrôler la disposition des éléments verticalement ou horizontalement. En parallèle le navigateur essaie d'optimiser l'espace disponible. Grâce au flexbox, on sort facilement du modèle classique (le contenu qui s'affiche du haut en bas) vers un layout plus complexe.
<div class="container">
<div class="item item-1">...</div>
<div class="item item-2">...</div>
...
<div class="item item-9">...</div>
</div>.container {
display: flex;
}Ici on établit l'axe principal d'un container flex sur lequel les items sont disposés. La valeur par défaut est row.
.container {
flex-direction: row | row-reverse | column | column-reverse;
}Cette propriété définit si le container comprend une seule ligne ou plusieurs. La valeur par défaut est nowrap.
.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}
Cette propriété est un raccourci des propriétés flex-direction et flex-wrap. La valeur par défaut est row nowrap.
/* exemple */
.container {
flex-flow: column wrap;
}Définit l'alignement le long de l'axe principal en distribuant l'espace qui reste libre. La valeur par défaut est flex-start.
.container {
justify-content: flex-start | flex-end | center | space-between | space-around
| space-evenly;
}
Définit la façon dont les items d'une ligne sont disposés le long de l'axe "secondaire". La valeur par défaut est stretch.
.container {
align-items: stretch | flex-start | flex-end | center | baseline;
}
}
Aligne les lignes d'un container flex (si plus qu'une ligne). La valeur par défaut est stretch.
.container {
align-content: flex-start | flex-end | center | space-between | space-around |
space-evenly | stretch;
}
Raccourci pour row-gap column-gap permet de définir les espaces entre les éléments.
.container {
gap: 1rem;
/*
row-gap: 1rem;
column-gap: 1rem;
*/
}Par défaut, les items flex sont disposés par ordre d'arrivée, order permet de changer l'ordre dans lequel ils apparaissent dans leur parent.
La valeur par défaut de tous les éléments est 0.
.item-2 {
order: 1;
}Un raccourci de 3 propriétés à la fois flex-grow, flex-shrink et flex-basis.
Chaque élément enfant peut être étiré (c'est flex-grow qui est responsable à ça) ou réduit (et c'est flex-shrink qui est responsable à ça). La 3e propriété flex-basis correspond à la taille de base d'un élément.
La valeur par défaut est 0 1 auto
Et si ensuite j'ajoute
.item-2 {
flex: 2;
/* est équivalent à : */
/*
flex-grow: 2;
flex-shrink: 1;
flex-basis: 0%;
*/
}.item-2 aura le droit à deux fois plus de l'espace restant.
https://codepen.io/alyra/pen/GRoZXEX
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}https://codepen.io/alyra/pen/pogyOLJ
margin: auto; fait de la magie quand appliqué sur un élément enfant.
Valeur auto est interprété de la façon : j'ajoute autant de marge que possible, regardons :
https://codepen.io/alyra/pen/NWxNLmP
https://codepen.io/alyra/pen/jOWqepw
- A Complete Guide to Flexbox (en) CSS-Tricks
- MDN - Tuto Flexbox - lecture obligatoire
- Quiz on-line Flexbox Froggy