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.
Quatre blocs identiques sont répartis uniformément sur toute la largeur du container.
px pour toutes les tailles.Trois blocs sont empilés les uns sous les autres et centrés horizontalement dans le container.
Trois blocs sont empilés les uns sous les autres. Le premier touche le bord supérieur, le deuxième est au milieu, le troisième touche le bord inférieur.
px.Trois blocs sont placés au bord inférieur du container.
px pour toutes les tailles.Quatre blocs sont placés au bord inférieur du container et répartis uniformément.
px pour toutes les tailles.Un bloc haut est à gauche. À droite — deux blocs l'un sous l'autre. Celui du haut touche le bord supérieur, celui du bas — le bord inférieur.
Le container est composé de deux parties. À gauche il y a deux blocs — un en haut, un en bas. À droite il y a un bloc, placé exactement au centre.
Une carte se trouve au centre d'un grand container. À l'intérieur de la carte, trois blocs sont empilés les uns sous les autres. Celui du haut touche le bord supérieur de la carte, celui du bas — le bord inférieur, et tous les blocs sont centrés horizontalement.
Reproduis la disposition des blocs.
px pour toutes les tailles.
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,
flex-direction,
justify-content,
align-items.