Flexbox avancé

flex-wrap

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éfaut)
  🟩 🟦 🟥

• 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.

CodePen | smnarnold 👀

align-content

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

CodePen | smnarnold 👀

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.

CodePen | smnarnold 👀

flex

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:

flex-grow: 1;
flex-shrink: 0;
flex-basis: 25%;

Il est possible de faire l'équivalent simplement via:

flex: 1 0 25%;

CodePen | smnarnold 👀

flex-flow

Cette propriété permet de définir le flex-direction et flex-wrap en une seule propriété. Il s'agit d'une propriété raccourcis.

Par exemple:

flex-direction: row-reverse;
flex-wrap: wrap;

est équivalent à

flex-flow: row-reverse wrap;

CodePen | smnarnold 👀