<aside> <img src="/icons/globe_blue.svg" alt="/icons/globe_blue.svg" width="40px" />

LA DOCUMENTATION INTERACTIVE:

→→→→→→ https://frontend.eikon.ch/flexbox ←←←←←←

</aside>

Exercice

exercice-flex.zip

Partie 1: display: flex

Le module des boîtes flexibles, aussi appelé flexbox, a été conçu comme un système de positionnement et d'alignement des éléments HTML.

Le principe de la mise en page avec Flexbox est simple : vous définissez un conteneur, et à l'intérieur vous placez plusieurs éléments.

.container {
  **display: flex;**
}

https://codepen.io/toni-io/pen/poBxowO

flex-direction

Flexbox nous permet d'agencer ces éléments dans le sens que l'on veut. C'est à-dire de manière horizontale ou verticale (row / column).

Pour cela, on utilise la propriété flex-direction sur le conteneur afin de choisir la direction de l'axe principal que vont respecter les éléments enfants.

.container {
  display: flex;
  **flex-direction: column;**
}

flex-direction: row

permet un alignement horizontal des éléments dans le conteneur flex. C’est la valeur par défaut.

flex-direction: column

définit que les éléments dans un conteneur flex doivent s'aligner verticalement

flex-direction: row-reverse

permet un alignement horizontal des éléments dans le conteneur flex.

flex-direction: column-reverse

permet un alignement vertical des éléments dans un conteneur flex.

flex-wrap

flex-wrap indique si les éléments flexibles sont contraints à être disposés sur une seule ligne ou s'ils peuvent être affichés sur plusieurs lignes avec un "retour automatique".

C'est une propriété qui sera particulièrement utile pour gérer des mise en page responsive.

.container {
  display: flex;
  **flex-wrap: wrap;**
}

flex-wrap: nowrap

interdit aux éléments de revenir à la ligne. Les éléments vont alors se répartir l'espace disponible. C’est la valeur par défaut.

flex-wrap: wrap

autorise les retours à la ligne entre les éléments d'un conteneur flex.

flex-wrap: wrap-reverse

autorise les retours à la ligne entre les éléments d'un conteneur flex. Ces retours à la ligne se feront de bas en haut.

<aside> 🛠 EXERCICE 1 Ouvrez l’exercice Flexbox dans VS Code, lancez Live Server (Go Live en bas à droite de la fenêtre) et complétez le fichier exercice-1.css pour reproduire les exemples en images. L’exercice se fait intégralement dans le CSS. Pour info, et comme exemple, l'exercice 1 est déjà résolu.

</aside>

Partie 2: Alignements

Axe principal et secondaire

Quand on configure une boîte flexible avec flexbox, on crée automatiquement deux axes:

• L'axe principal Sa direction est définie avec flex-direction, et sera verticale (column) ou horizontale (row).
• L'axe secondaire Cet axe indique la deuxième dimension d'une boîte flexible et sera perpendiculaire à l'axe principal.

justify-content

La propriété justify-content permet l’alignement des éléments flex en fonction de la direction de l’axe principal.

justify-content: flex-start

aligne les élément au début du conteneur sur l’axe principal. C’est la valeur par défaut.

justify-content: flex-end

aligne les éléments à la fin du conteneur sur l’axe principal.

justify-content: center

aligne les éléments au centre du conteneur sur l’axe principal.