Flexbox avancéPar défaut, flex essaie de tout afficher sur une même ligne.
Cependant, il est possible de lui spécifier d'afficher sur plus d'une ligne au besoin grâce à la propriété flex-wrap.
Valeurs possibles:
-
nowrap (Par défault)
🟩 🟦 🟥 -
wrap
🟩 🟦
🟥 -
wrap-reverse
🟥
🟦 🟩
flex-wrap: nowrap vs wrap
Par exemple, si un parent est en display: flex; et possède trois enfants ayant une largeur de 50%, il est impossible à la base qu'ils puissent tous s'afficher sur une même ligne.
Cependant, puisqu'un élément en display: flex; est en flex-wrap: nowrap; par défaut, ses enfants sont obligés de s'afficher sur une même ligne. La largeur des enfants est donc réajustée automatiquement à 33,33% afin de les garder juxtaposés.
Néanmoins, grâce à flex-wrap: wrap;, il est possible de spécifier à un élément en display: flex; d'afficher ses enfants sur plusieurs lignes si l'espace alloué n'est pas suffisant afin de les garder juxtaposés sans avoir à les redimensionner.
À gauche, flex-wrap: nowrap;
À droite, flex-wrap: wrap;
Dans la même lignée que align-items, mais au lieu d'aligner les éléments directement, cette propriété aligne les différentes lignes générées par flex-wrap. Autrement dit, pour avoir un effet, cette propriété dépend de la présence de flex-wrap.
Possibilités:
- stretch(Par défaut)
- flex-start
- flex-end
- center
- space-between
- space-around
- space-evenly
- etc.
Sans align-content vs align-content: center
À gauche, aucun align-content.
À droite, align-content: center;.
align-items: center vs align-content: center
La propriété align-items: center; centre les éléments en plein centre de leur ligne respective, tandis que align-content: center; centre les lignes en plein centre de leur parent.
À gauche, align-items: center;,
À droite, align-content: center;.
Cette propriété permet de définir le flex-grow, flex-shrink et flex-basis d'un élément en une seule propriété. Il s'agit en fait d'une propriété raccourcis.
Par exemple, si un élément à les propriétés:
Il est possible de faire l'équivalent simplement via:
À gauche, flex-grow: 1; flex-shrink: 0; flex-basis: 25%;,,
À droite, flex: 1 0 25%;
Cette propriété permet de définir le flex-directionet flex-wrapen une seule propriété. Il s'agit d'une propriété raccourcis.
Par exemple:
est équivalent à
À gauche, flex-direction: row-reverse; flex-wrap: wrap;,
À droite, flex-flow: row-reverse wrap;.