BananaMaster

7 Flexbox et comment fonctionnent display: flex, justify-content, align-items - ( HTML et CSS, Front End )

Si tu as oublié quelque chose — clique pour retourner à la leçon.

📘 Exercices pratiques : Flexbox

Pour chaque tâche, crée des classes séparées dans le fichier style.css et applique-les aux balises correspondantes.

📌 Structure des fichiers : index.html + style.css

💡 Règle principale : display: flex s'écrit toujours sur le parent, pas sur l'élément enfant.

✏️ Tâche 1 — flex-direction: row (par défaut)

Trois blocs sont en ligne. Estime les dimensions du parent à l'œil :

• Parent — fond : red, dimensions en px, ajoute display: flex
• Enfant 1 — fond : #e74c3c, dimensions en %
• Enfant 2 — fond : #3498db, dimensions en %
• Enfant 3 — fond : #2ecc71, dimensions en %
• Enfant 4 — fond : #2c3e50, dimensions en %
• 💡 flex-direction: row est la valeur par défaut — pas besoin de l'écrire

✏️ Tâche 2

Trois blocs sont en colonne. Estime les dimensions du parent à l'œil :

• Parent — fond : #8e44ad, dimensions en px
• Enfant 1 — fond : #f39c12, dimensions en %
• Enfant 2 — fond : #e74c3c, dimensions en %
• Enfant 3 — fond : #1abc9c, dimensions en %

✏️ Tâche 3

Le bloc est aligné au centre horizontalement. Estime les dimensions à l'œil :

• Parent — fond : #2d3436, dimensions en px
• Enfant — fond : #fdcb6e, dimensions en %

✏️ Tâche 4

Le bloc est aligné au bord droit. Estime les dimensions à l'œil :

• Parent — fond : #00b894, dimensions en px
• Enfant — fond : #d63031, dimensions en %

✏️ Tâche 5

Le bloc est aligné au centre vertical. Estime les dimensions à l'œil :

• Parent — fond : #6c5ce7, dimensions en px
• Enfant — fond : #fd79a8, dimensions en %

✏️ Tâche 6

Le bloc est aligné au bord inférieur. Estime les dimensions à l'œil :

• Parent — fond : #0984e3, dimensions en px
• Enfant — fond : #ffeaa7, dimensions en %

✏️ Tâche 7

Le bloc est placé exactement au centre horizontalement et verticalement. Estime les dimensions à l'œil :

• Parent — fond : #e17055, dimensions en px
• Enfant — fond : #74b9ff, dimensions en %

✏️ Tâche 8

Trois blocs — les extrémités sont plaquées aux bords, celui du milieu entre eux. Verticalement, tous sont centrés. Estime les dimensions à l'œil :

• Parent — fond : #2c3e50, dimensions en px
• Enfant 1 — fond : #e74c3c, dimensions en %
• Enfant 2 — fond : #f1c40f, dimensions en %
• Enfant 3 — fond : #2ecc71, dimensions en %

✏️ Tâche 9

Une colonne de deux blocs est alignée au coin inférieur droit. Estime les dimensions à l'œil :

• Parent — fond : #6c5ce7, dimensions en px
• Enfant 1 — fond : #fd79a8, dimensions en %
• Enfant 2 — fond : #00cec9, dimensions en %

✏️ Tâche 10

Deux conteneurs flex sont imbriqués à l'intérieur d'un seul. Estime les dimensions à l'œil :

• Parent externe — fond : #dfe6e9, dimensions en px, display: flex, justify-content: space-between
• Bloc gauche — fond : #b2bec3, largeur en %, lui-même conteneur flex : justify-content: space-between
• Gauche → enfant 1 — fond : #e74c3c, dimensions en %
• Gauche → enfant 2 — fond : #3498db, dimensions en %
• Bloc droit — fond : #2d3436, largeur en %, lui-même conteneur flex : justify-content: center, align-items: center
• Droit → enfant — fond : #fdcb6e, dimensions en %

📌 Important :
Chaque classe est écrite séparément dans style.css.
Utilisez uniquement HTML et CSS.
Entraîne-toi sur les propriétés : display: flex, justify-content, align-items.