9. Boxes positionnement¶

Pour les exercices suivant commencez par créer une nouvelle page HTML à votre mini site d'exercice appelez boxes.html. Et ajoutez cette page à votre menu de navigation principal.

Exercice 1 - Positionnement des boîtes¶

1. Créez une boîte principale avec pour classe CSS main-box avec les attributs de style suivant:
   • largeur: auto ;
   • hauteur: 250px ;
   • une bordure de 1px solide noire ;
   • une couleur de fond lightgray ;
   • des marges du haut et du bat extérieures de 20px ;
   • des marges de gauche et de droite extérieures de auto (centrée).
2. Ajoutez à l'intérieur de la boîte principale main-box, 3 boîtes avec comme classe CSS box-item et les attributs suivant:
   • taille: 100 x 100px ;
   • une bordure de 1px solide noire ;
   • une couleur de fond différente pour chaque boîte ;
3. Positionnez les 3 boîtes de la manière suivante:
   • la première boîte en haut à gauche avec une marge de 20px ;
   • la deuxième boîte au centre de la boîte principale ;
   • la troisième boîte en bas à droite avec une marge de 20px.

Résulta attendu

Exercice 2 - Alignement des boîtes avec Flexbox¶

1. Créez une boîte principale avec pour classe CSS main-box-flex avec les attributs de style suivant:
   • largeur: auto ;
   • hauteur: 250px ;
   • une bordure de 1px solide noire ;
   • une couleur de fond lightgray ;
   • des marges du haut et du bat extérieures de 20px ;
   • des marges intérieur de 20px.
2. Ajoutez à l'intérieur de la boîte principale main-box-flex, 3 boîtes avec comme classe CSS box-item-flex et les attributs suivant:
   • taille: 100 x 100px ;
   • une bordure de 1px solide noire ;
   • une couleur de fond différente pour chaque boîte ;
3. Utilisez Flexbox pour aligner les boîtes horizontalement et verticalement.
4. Utilisez Flexbox pour espacer les boîtes entre elles horizontalement.
5. Faite en sorte que le 1ère boite se positionne en haut à gauche avec Flexbox.
6. Faite en sorte que la 3ème boîte se positionne en bat à droite avec Flexbox.

Exercice 3 - Alignement des boîtes avec Flexbox¶

Veuillez reproduire l'alignement des images selon le modèle ci-dessous en utilisant l'attribut justify-content: spécifique pour une boîte / boxe de type flex.

Pour ce faire retrouvez la base du code HTML et CSS a utiliser ici

Exercice 4 - Grid Layout - Flexbox - Media Query¶

Modifier et ajouter le CSS nécessaire pour rentre le site des exercices totalement responsive en utilisant:

• Grid Layout
• Flexbox
• Hamburger Menu

Pour ce faire retrouvez une base de code HTML, CSS et Javascript pour vous inspirer ici.