Comment utiliser flexbox pour la mise en page des éléments sur la page?

Flexbox (ou Flexible Box Layout) est un module CSS conçu pour créer des mises en page flexibles des éléments dans un conteneur, permettant de distribuer facilement l’espace et d’aligner les éléments, même lorsque leurs tailles sont inconnues ou changent dynamiquement.

Le concept principal de Flexbox est le conteneur flex et ses éléments flex.

Propriétés pour le conteneur flex (display: flex;):

• flex-direction: Définit la direction dans laquelle les éléments flex sont placés dans le conteneur (axe principal).

  • row (par défaut): horizontal, de gauche à droite.
  • row-reverse: horizontal, de droite à gauche.
  • column: vertical, de haut en bas.
  • column-reverse: vertical, de bas en haut.

• flex-wrap: Définit si les éléments flex se replient dans une nouvelle(s) ligne(s) si ils ne tiennent pas dans une seule ligne.

  • nowrap (par défaut): tous sur une seule ligne.
  • wrap: se replient dans de nouvelles lignes.
  • wrap-reverse: se replient dans de nouvelles lignes en ordre inverse.

• justify-content: Aligne les éléments flex le long de l’axe principal.

  • flex-start (par défaut): au début de l’axe principal.
  • flex-end: à la fin de l’axe principal.
  • center: au centre de l’axe principal.
  • space-between: distribution uniforme avec des espaces entre les éléments.
  • space-around: distribution uniforme avec des espaces autour des éléments.
  • space-evenly: distribution uniforme avec des espaces égaux entre et autour des éléments.

• align-items: Aligne les éléments flex le long de l’axe transversal (perpendiculaire à l’axe principal).

  • stretch (par défaut, si les éléments n’ont pas de hauteur/largeur définie): étire les éléments en hauteur/largeur de l’axe transversal.
  • flex-start: au début de l’axe transversal.
  • flex-end: à la fin de l’axe transversal.
  • center: au centre de l’axe transversal.
  • baseline: alignement selon la ligne de base du texte.

• align-content: Aligne les lignes d’éléments flex le long de l’axe transversal lorsque il y a un retour à la ligne (flex-wrap: wrap). Fonctionne de manière similaire à justify-content mais pour les lignes.

  • stretch (par défaut): étire les lignes.
  • flex-start: lignes au début de l’axe transversal.
  • flex-end: lignes à la fin de l’axe transversal.
  • center: lignes au centre de l’axe transversal.
  • space-between: distribution uniforme des lignes avec des espaces entre elles.
  • space-around: distribution uniforme des lignes avec des espaces autour.

• gap, row-gap, column-gap: Définit les espaces entre les éléments flex (en une seule valeur ou séparément pour lignes et colonnes).

.flex-container {
  display: flex; /* Rend l’élément un conteneur flex */
  flex-direction: row; /* Les éléments sont placés horizontalement */
  flex-wrap: wrap; /* Les éléments se replient dans une nouvelle ligne */
  justify-content: center; /* Les éléments sont alignés au centre de l’axe principal */
  align-items: center; /* Les éléments sont alignés au centre de l’axe transversal */
  gap: 10px; /* Espace de 10px entre les éléments flex */
}

Propriétés pour les éléments flex (directs enfants du conteneur flex):

• order: Définit l’ordre d’affichage de l’élément dans le conteneur (par défaut 0). Les valeurs inférieures apparaissent en premier.

• flex-grow: Définit le coefficient qui détermine dans quelle mesure l’élément flex peut s’étirer par rapport aux autres éléments dans le conteneur, en occupant l’espace disponible. Par défaut 0.

• flex-shrink: Définit le coefficient qui détermine dans quelle mesure l’élément flex peut se réduire en cas de manque d’espace. Par défaut 1.

• flex-basis: Définit la taille de base de l’élément flex avant la distribution de l’espace libre. Peut être en px, %, rem, auto, etc. (par défaut auto).

• flex: Propriété raccourcie pour flex-grow, flex-shrink, flex-basis (par exemple, flex: 1 1 0;).

• align-self: Redéfinit l’alignement de l’élément le long de l’axe transversal, en override de align-items du conteneur. Prend les mêmes valeurs.

.flex-item {
  order: 2; /* Cet élément sera affiché en second, indépendamment de sa position dans le HTML */
  flex-grow: 1; /* Cet élément occupera l’espace restant */
  flex-shrink: 0; /* Cet élément ne se réduira pas */
  flex-basis: 100px; /* Taille de base de 100px */
  align-self: flex-start; /* Alignement de cet élément au début de l’axe transversal */
}

.another-item {
  flex: 1 1 auto; /* Raccourci: grow: 1, shrink: 1, basis: auto */
}

Flexbox permet de créer divers layouts, allant de simples alignements à des structures plus complexes et adaptatives, en contrôlant la distribution de l’espace et l’alignement des éléments à l’intérieur du conteneur.