Aller au contenu

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.

Notez

Pour cet exercice vous devez utiliser uniquement la technique de positionnement avec l'attribut position. Pas de flex! Et pas de classe supplémentaire, mais utilisez les techniques de Ciblage structurel.

Résulta attendu

Ex boxe - 1

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.

Ex boxe - 2

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.

Flexbox - ex 3

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