CSS FlexBox – Cfitech

🌟 Flexbox est un outil puissant qui nous aide à créer facilement des mises en page flexibles et responsives.

Qu’est-ce que Flexbox ?

Flexbox, ou la disposition en boîte flexible, est un module CSS qui offre une manière plus efficace de disposer, aligner et distribuer l’espace entre les éléments dans un conteneur. Il facilite la conception de mises en page flexibles et responsives sans utiliser de Float ou de Position.

Les bases

L’axe principal et l’axe transversal
- L’axe principal est l’axe primaire le long duquel les éléments flexibles sont disposés. Il peut être horizontal (ligne) ou vertical (colonne).
- L’axe transversal est perpendiculaire à l’axe principal.
- Le conteneur flexible et les éléments flexibles
  - Le conteneur flexible contient les éléments flexibles. Il est créé en définissant display: flex sur un élément.
  - Les éléments flexibles sont les enfants directs du conteneur flexible.

Propriétés de Flexbox

Propriété flex-direction


flex-direction: row;         /* Éléments disposés horizontalement */
flex-direction: row-reverse; /* Éléments disposés en ordre inverse horizontalement */
flex-direction: column;      /* Éléments disposés verticalement */
flex-direction: column-reverse; /* Éléments disposés en ordre inverse verticalement */

Propriété flex-wrap

flex-wrap: nowrap;       /* Tous les éléments seront sur une seule ligne */
flex-wrap: wrap;         /* Les éléments s'enrouleront sur plusieurs lignes */
flex-wrap: wrap-reverse; /* Les éléments s'enrouleront sur plusieurs lignes en ordre inverse */

Propriété flex-grow

flex-grow: 1; /* Les éléments vont grandir pour remplir l'espace disponible */

Propriété flex-shrink

flex-shrink: 1; /* Les éléments vont rétrécir pour s'adapter au conteneur */

Propriété flex-basis

flex-basis: 200px; /* Taille initiale de l'élément avant de grandir ou de rétrécir */

Propriété flex gap

gap: 20px; /* Espace entre les éléments flexibles */

Alignement et justification des éléments

Propriété align-items

align-items: stretch;  /* Étirer les éléments pour remplir le conteneur */
align-items: center;   /* Centrer les éléments verticalement */
align-items: flex-start; /* Aligner les éléments au début de l'axe transversal */
align-items: flex-end; /* Aligner les éléments à la fin de l'axe transversal */
align-items: baseline; /* Aligner les éléments le long de leur ligne de base */

Propriété justify-content

justify-content: flex-start; /* Aligner les éléments au début de l'axe principal */
justify-content: flex-end;   /* Aligner les éléments à la fin de l'axe principal */
justify-content: center;     /* Centrer les éléments le long de l'axe principal */
justify-content: space-between; /* Distribuer les éléments de manière égale avec de l'espace entre eux */
justify-content: space-around;  /* Distribuer les éléments avec de l'espace autour d'eux */
justify-content: space-evenly;  /* Distribuer les éléments avec un espace égal autour d'eux */

Propriété align-content

align-content: flex-start;   /* Aligner les lignes flexibles au début de l'axe transversal */
align-content: flex-end;     /* Aligner les lignes flexibles à la fin de l'axe transversal */
align-content: center;       /* Centrer les lignes flexibles le long de l'axe transversal */
align-content: space-between; /* Distribuer les lignes flexibles avec de l'espace entre elles */
align-content: space-around;  /* Distribuer les lignes flexibles avec de l'espace autour d'elles */
align-content: space-evenly;  /* Distribuer les lignes flexibles avec un espace égal autour d'elles */

Propriété align-self

align-self: auto;     /* Par défaut, hérite de la valeur du parent */
align-self: stretch;  /* Étirer l'élément pour remplir le conteneur */
align-self: center;   /* Centrer l'élément verticalement */
align-self: flex-start; /* Aligner l'élément au début de l'axe transversal */
align-self: flex-end; /* Aligner l'élément à la fin de l'axe transversal */
align-self: baseline; /* Aligner l'élément le long de sa ligne de base */