Flexbox

5

Contrairement aux autres valeurs de display qui influencent l'affichage d'un élément par rapport aux autres éléments dans la page, la propriété display: flex;, influence l'affichage de ses enfants en modifiant leur largeur/hauteur et leur ordre, afin de remplir l'espace disponible le plus adéquatement possible.

Flex-direction

Comme son nom l'indique, la valeur de cette propriété définit la direction qu'auront ses enfants.

Valeurs possibles:

  • row ➡️ (Par défaut)
  • row-reverse ⬅️
  • column ⬇️
  • column-reverse ⬆️

Flex-direction: Row vs Column

Voir le CodePen de Simon Arnold (@smnarnold).

Pour en savoir plus, voir cet article MDN sur flex-direction.

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; à la propriété et la valeur 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 plus d'une ligne si l'espace alloué n'est pas suffisant afin de les garder juxtaposés sans avoir à les redimensionner.

Voir le CodePen de Simon Arnold (@smnarnold).

Pour en savoir plus, voir cet article MDN sur flex-wrap.

Justify-content

Un peu comme Word ou Google Doc justify-content, flex vous permet de justifier votre contenu horizontalement afin atteindre l'affichage désiré.

Possibilités:

  • flex-start (Par défaut)
  • flex-end
  • center
  • space-between
  • space-around
  • space-evenly
  • etc

Justify-content: Flex-start vs Flex-end

Voir le CodePen de Simon Arnold (@smnarnold).

Justify-content: Center vs Space-between

Voir le CodePen de Simon Arnold (@smnarnold).

Justify-content: Space-around vs Space-evenly

Voir le CodePen de Simon Arnold (@smnarnold).

Pour en savoir plus, voir cet article MDN sur justify-content.

Align-items

Dans la même lignée que Justify-content, mais cette fois à la verticale.

Possibilités:

  • stretch (Par défaut)
  • flex-start
  • flex-end
  • center
  • etc

Align-items: Stretch vs Center

Voir le CodePen de Simon Arnold (@smnarnold).

Align-items: Flex-start vs Flex-end

Voir le CodePen de Simon Arnold (@smnarnold).

Pour en savoir plus, voir cet article MDN sur align-items.

justify-content et align-items sont l'équivalent de brancher une clé USB en CSS. Deux ou trois tentatives sont toujours requises avant d'obtenir le résultat espéré.

Pour visualiser rapidement l'effet les différentes propriétés associées à flex, je vous invite à explorer cette démo Flex de Scotch.io 🥃

Order

Définis l'ordre d'affichage d'un enfant dans un parent étant à display: flex;.

Par défaut, cette valeur est à 0.

Voir le CodePen de Simon Arnold (@smnarnold).

Exercice TMNT 🐢 codepen.io/smnarnold/pen/XWdOdaP

Pour en savoir plus, voir cet article MDN sur order.

Flex-grow

Propriété pouvant être appliquée à un enfant d'on le parent est en display: flex;.

Cette propriété accepte une valeur sans unité indiquant la proportion avec laquelle l'élément devrait grandir en cas de besoin (si flex l'oblige).

Par défaut, cette valeur est à 0.

Les unités négatives, ne sont pas permises.

Voir le CodePen de Simon Arnold (@smnarnold).

Pour en savoir plus, voir cet article MDN sur flex-grow.

Flex-shrink

Propriété pouvant être appliquée à un enfant dont le parent est en display: flex;.

Cette propriété accepte une valeur sans unité indiquant la proportion avec laquelle l'élément devrait rétrécir en cas de besoin (si flex l'oblige). Bref, elle agit à l'inverse de flex-grow;

Par défaut, cette valeur est à 1.

Les unités négatives, ne sont pas permises.

Voir le CodePen de Simon Arnold (@smnarnold).

Pour en savoir plus, voir cet article MDN sur flex-shrink.

Flex-basis

Propriété pouvant être appliquée à un enfant dont le parent est en display: flex;.

Cette propriété accepte une valeur (ex: 100px, 20%, 5rem, etc.) pour indiquer la dimension que devrait prendre un élément avant que l'espace restant soit redistribué.

Par défaut, cette valeur est à "auto".

Voir le CodePen de Simon Arnold (@smnarnold).

Pour plus d'information, je vous suggère fortement le guide de *️CSS-Tricks sur flex!

flexboxfroggy.com 🐸 compléter les 24 étapes pour maitriser vos propriétés flex.

flexboxdefense.com 🗼 protéger votre territoire de vos ennemis en sélectionnant les bonnes configurations Flex (anglais).

Devenez un maître flex en jouant à Flexbox Zombies 🧟 (anglais)

Donnez votre opinion
sur les notes de cours sur cette page.
Merci d'avoir partagé ton opinion 😎
Pssst, c'est 💯 anonyme