Comment définir les propriétés de flexbox?

Les propriétés sont définies pour le conteneur (l'élément auquel on applique display: flex ou display: inline-flex) et ses descendants directs (les éléments à l'intérieur du conteneur).

Propriétés pour le conteneur :

display : Définit que l'élément est un conteneur flex. Valeurs possibles : flex (bloc) et inline-flex (en ligne).
flex-direction : Définit la direction de l'axe principal sur lequel sont disposés les éléments flex. Valeurs possibles : row (par défaut, de gauche à droite), row-reverse (de droite à gauche), column (de haut en bas), column-reverse (de bas en haut).
flex-wrap : Contrôle si les éléments flex se replient sur une nouvelle ligne s'ils dépassent les limites du conteneur. Valeurs possibles : nowrap (par défaut, sans pliage), wrap (repli sur une nouvelle ligne), wrap-reverse (repli en ordre inverse).
justify-content : Aligne les éléments flex le long de l'axe principal. Valeurs possibles : flex-start (début du conteneur), flex-end (fin du conteneur), center, space-between (espace uniforme entre les éléments, premier au début, dernier à la fin), space-around (espace uniforme autour de chaque élément).
align-items : Aligne les éléments flex le long de l'axe transversal. Valeurs possibles : stretch (par défaut, étire les éléments à la hauteur du conteneur), flex-start (début du conteneur sur l'axe transversal), flex-end (fin du conteneur sur l'axe transversal), center, baseline (alignement sur la ligne de base du texte).
align-content : Aligne les lignes d'éléments flex (lorsque flex-wrap est utilisé) le long de l'axe transversal. N'affecte pas s'il n'y a qu'une seule ligne. Valeurs possibles : stretch (par défaut), flex-start, flex-end, center, space-between, space-around.
gap, row-gap, column-gap : Définissent la distance entre les éléments flex le long des axes principal et transversal.

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

order : Définit l'ordre de disposition de l'élément dans le conteneur. Par défaut, tous ont order: 0. Les éléments avec une valeur order inférieure sont placés en premier.
flex-grow : Détermine en combien de fois l'élément peut augmenter par rapport aux autres en cas d'espace libre. Par défaut, 0 (ne grandit pas).
flex-shrink : Détermine en combien de fois l'élément peut réduire en cas de manque d'espace. Par défaut, 1 (se réduit).
flex-basis : Définit la taille initiale de l'élément avant la distribution de l'espace libre. Peut être en pixels, pourcentages ou auto. Par défaut, auto.
flex : Propriété abrégée pour flex-grow, flex-shrink et flex-basis. Par exemple, flex: 1 1 auto;.
align-self : Redéfinit la valeur de align-items pour un élément individuel. Valeurs possibles : auto (utilise la valeur de align-items du parent), stretch, flex-start, flex-end, center, baseline.

Exemple :

.flex-container {
  display: flex; /* Rend l'élément un conteneur flex */
  flex-direction: row; /* Dispose les éléments en ligne */
  justify-content: center; /* Aligne les éléments au centre de l'axe principal */
  align-items: center; /* Aligne les éléments au centre de l'axe transversal */
  gap: 10px; /* Définit l'espacement entre les éléments */
}

.flex-item {
  flex-grow: 1; /* L'élément peut grandir */
  flex-basis: 100px; /* Taille initiale de l'élément */
}

.special-item {
  order: -1; /* Cet élément sera placé en premier */
  align-self: flex-end; /* Redéfinit l'alignement en transversal pour cet élément */
}