CSS Flexbox : aligner et répartir des éléments facilement

Conteneur

.nav {
  display: flex;
  flex-direction: row;          /* ou column */
  justify-content: space-between; /* flex-start, center, space-around… */
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

Enfants

• flex: 1 : prend l'espace disponible.
• flex: 1 1 250px : base de 250 px, grandit et rétrécit.
• margin-left: auto : pousse à droite.
• order, align-self.

Centrer

.centre { display: flex; justify-content: center; align-items: center; min-height: 100vh; }

Flexbox : une dimension (ligne ou colonne). Pour une grille en deux dimensions : CSS Grid. S'entraîner : Flexbox Froggy.