Flexbox

Flexbox organise des éléments sur un axe principal.

Le modèle mental

Avant tout, pense en deux axes :

• axe principal (main axis)
• axe secondaire (cross axis)

L'axe principal dépend de flex-direction.

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

Propriétés du conteneur à maîtriser

• flex-direction
• justify-content
• align-items
• align-content
• flex-wrap
• gap

Propriétés des enfants flex

• flex-grow : capacité à prendre l'espace libre
• flex-shrink : capacité à rétrécir
• flex-basis : taille de base
• align-self : alignement individuel

Raccourci utile :

.item {
  flex: 1 1 240px;
}

Quand utiliser Flexbox

Parfait pour :

• menus
• barres d'actions
• groupes de boutons
• alignement vertical/horizontal rapide

Astuce :

• pense justify-content pour l'axe principal
• pense align-items pour l'axe secondaire

Erreurs fréquentes

• oublier flex-wrap et provoquer des débordements
• confondre axe principal et axe secondaire
• utiliser Flexbox pour de grandes grilles 2D (préférer Grid)

Avec cette logique, tu maîtrises très vite 80% des layouts courants.

A retenir

Flexbox est idéal pour des composants sur un axe : menu, toolbar, groupe de boutons. Il est rapide à mettre en place, robuste et très efficace.

Mini pratique

Crée un container Flex avec trois blocs. Teste justify-content: center, puis space-between, puis change flex-direction.

Ajoute ensuite flex-wrap: wrap et réduit la largeur de la fenêtre pour observer le comportement sur écran étroit.