Jun 20, 2024
Propriétés principales
display: flex;
: Définit un conteneur comme Flexbox.flex-direction
: Définit la direction des éléments.
row
: Ligne de gauche à droite (par défaut).column
: Colonne de haut en bas.row-reverse
et column-reverse
: Inversent la direction.flex-wrap
: Permet de passer à la ligne si nécessaire.
nowrap
: par défaut, tous les éléments sur une ligne.wrap
: permet d'aller à la ligne.justify-content
: Aligne les éléments horizontalement.
flex-start
, flex-end
, center
, space-between
, space-around
.align-items
: Aligne les éléments verticalement.
flex-start
, flex-end
, center
, stretch
(par défaut).align-content
: Gestion des espaces verticaux entre les lignes en cas de multi-lignes.Propriétés des éléments enfants
order
: Change la position d'affichage des éléments.flex-grow
, flex-shrink
, flex-basis
: Gestion de la taille des éléments.
flex-grow
: Croissance des éléments pour occuper l'espace restant.flex-shrink
: Réduction des éléments quand l'espace est insuffisant.flex-basis
: Taille de base des éléments avant les calculs de flex-grow
et flex-shrink
.align-self
: Permet d'aligner individuellement chaque élément différemment du groupe.Mosaïque d'images
display: flex;
, flex-wrap
et justify-content
pour positionner les images.Menu responsive
display: flex;
, align-items: center;
, et justify-content: space-around;
.Layout avec Sidebar et Contenu
display: flex;
pour aligner les éléments sur la même hauteur.order
pour changer l'ordre des éléments sur différents types d'écrans.Flexbox simplifie la gestion des layouts en CSS, surtout pour des cas d'utilisation variés et des alignements dynamiques.