🎯 Semaine 3 - Jour 1 : Introduction à Flexbox

đź“š Qu'est-ce que Flexbox ?

Flexbox (Flexible Box Layout) est un module CSS qui facilite la création de mises en page flexibles et responsives. Il permet d'aligner et de distribuer l'espace entre les éléments de manière intuitive.

Avantages : Alignement simple, distribution automatique, responsive naturel, moins de code que les anciennes méthodes (float).

🎨 Concepts de base

Conteneur Flex

L'élément parent qui contient les flex items.

.container {
  display: flex;
}
1
2
3

âś… Effet : Les enfants deviennent des flex items et s'alignent en ligne

Axes Flexbox

Flexbox fonctionne selon 2 axes :

  • Axe principal (main axis) : Direction des flex items (row = horizontal, column = vertical)
  • Axe transversal (cross axis) : Perpendiculaire Ă  l'axe principal

đź’ˇ Important :
• justify-content = axe principal
• align-items = axe transversal

↔️ flex-direction

flex-direction: row (défaut)

.container {
  display: flex;
  flex-direction: row;
}
1
2
3

Les items sont disposés horizontalement (de gauche à droite)

flex-direction: column

.container {
  display: flex;
  flex-direction: column;
}
1
2
3

Les items sont disposés verticalement (de haut en bas)

🎯 justify-content (Axe principal)

flex-start (défaut)

justify-content: flex-start;
1
2
3

center

justify-content: center;
1
2
3

flex-end

justify-content: flex-end;
1
2
3

space-between

justify-content: space-between;
1
2
3

Espace Ă©gal entre les items

space-around

justify-content: space-around;
1
2
3

Espace Ă©gal autour de chaque item

space-evenly

justify-content: space-evenly;
1
2
3

Espace parfaitement Ă©gal partout

⬆️ align-items (Axe transversal)

stretch (défaut)

align-items: stretch;
1
2
3

Les items s'Ă©tirent pour remplir le conteneur

flex-start

align-items: flex-start;
1
2
3

Alignés en haut

center

align-items: center;
1
2
3

Centrés verticalement ✅ Très utilisé !

flex-end

align-items: flex-end;
1
2
3

Alignés en bas

🔄 gap & flex-wrap

gap (espacement)

.container {
  display: flex;
  gap: 20px;
}
1
2
3

đź’ˇ Moderne : Remplace les margin entre items

flex-wrap: wrap

.container {
  display: flex;
  flex-wrap: wrap;
}
1
2
3
4
5
6

Les items passent à la ligne si nécessaire

🎨 Centrage parfait

La technique miracle : Centrer horizontalement ET verticalement

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}
Parfaitement centré ! 🎯

✅ Cette technique Flexbox remplace des années de galères avec position absolute, transform, table-cell, etc. C'est LA raison pour laquelle Flexbox est révolutionnaire !

Froggiesplaining :


🎯 Objectifs :
âś… Comprendre le concept de Flexbox (conteneur + items)
✅ Maîtriser flex-direction (row/column)
âś… Utiliser justify-content pour l'axe principal
âś… Utiliser align-items pour l'axe transversal
✅ Combiner les propriétés pour un centrage parfait

📖 Résumé :
• display: flex active Flexbox
• justify-content = horizontal (en row)
• align-items = vertical (en row)
• gap = espacement entre items
• flex-wrap = retour à la ligne

🏋️ Exercice :
Créez une navbar avec logo à gauche et menu à droite en Flexbox !

Froggie

GitHub - eCrea