Flexbox
Organiser ton escouade d'éléments avec facilité.
Imagine : tu diriges une escouade de héros pour un raid. Le HTML a simplement "invoqué" ces héros les uns à la suite des autres.
Flexbox, c'est ton menu de formation tactique. En un clic, tu peux leur ordonner de se mettre en ligne, en colonne, de se centrer ou de s'écarter. Fini le casse-tête du positionnement manuel !
5.1 L'ordre de formation : display: flex
Pour utiliser Flexbox, il y a toujours deux acteurs : le conteneur (le chef d'escouade) et les enfants (les héros). La commande display: flex transforme un conteneur normal en chef d'escouade. Ses enfants directs deviennent flexibles.
5.2 Le simulateur tactique
Teste les différentes commandes pour voir comment ton escouade réagit :
flex-direction : row
1. Tank
2. Soigneur
3. DPS
justify-content : flex-start
Tank
Soigneur
DPS
align-items : stretch
Grand
Normal
Très Grand
flex-wrap : nowrap
Héros 1
Héros 2
Héros 3
Héros 4
Héros 5
5.3 Récapitulatif des commandes
- flex-direction : L'axe d'attaque (ligne ou colonne).
- justify-content : La répartition sur l'axe principal.
- align-items : L'alignement sur l'axe secondaire.
- flex-wrap : Autorise le passage à la ligne.