CSS Flexbox : aide-mémoire

Sur le conteneur

.conteneur {
  display: flex;
  flex-direction: row;       /* row | row-reverse | column | column-reverse */
  flex-wrap: wrap;           /* nowrap | wrap | wrap-reverse */
  justify-content: center;   /* alignement sur l'axe principal */
  align-items: center;       /* alignement sur l'axe secondaire */
  gap: 1rem;
}

justify-content

Sur les enfants

.enfant {
  flex-grow: 1;      /* capacité à grandir pour occuper l'espace libre */
  flex-shrink: 1;    /* capacité à rétrécir si ça manque de place */
  flex-basis: 200px; /* taille de départ avant grow/shrink */
  align-self: flex-start; /* override align-items pour cet élément */
  order: 2;           /* réordonner visuellement sans toucher le HTML */
}

Centrer un élément (le classique)

.conteneur {
  display: flex;
  justify-content: center;
  align-items: center;
}

gap plutôt que margin

/* à éviter : marge sur chaque enfant, à corriger sur le dernier */
.enfant { margin-right: 1rem; }
.enfant:last-child { margin-right: 0; }

/* préférable : gap gère l'espacement pour vous */
.conteneur { display: flex; gap: 1rem; }