Exercices semaine 5

Exercice 1

Attributs nécessaires :

• display: flex
• flex-wrap
• gap
• flex-direction

• align-items

• Crée un bloc parent qui contient 3 blocs qui contiennent :

  • une image
  • un titre
  • un lien

• Faire en sorte que le bloc parent soit flex et affiche les enfants sur une ligne, puis permette le retour à la ligne sur plus petit écran (sans requête média, seulement avec le flex)

  

  ✔️ Utilise l'attribut gap sur le parent pour créer un espacement entre chaque enfant

• Utilise le flex sur les blocs enfants pour positionner le contenu de chaque bloc en colonne, centré sur l'horizontale.

  

Solution

HTML

<div id="exercice1">
    <div>
        <img src="images/ecureuil.png" alt="ecureuil">
        <h2>Écureuil</h2>
        <a href="#">Plus d'info</a>
    </div>
    <div>
        <img src="images/fille.png" alt="fille">
        <h2>Fille</h2>
        <a href="#">Plus d'info</a>
    </div>
    <div>
        <img src="images/monstre.png" alt="monstre">
        <h2>Monstre</h2>
        <a href="#">Plus d'info</a>
    </div>
</div>

CSS

#exercice1{
    display: flex;
    flex-wrap:wrap;
    gap: 2rem;
}

#exercice1 div{
    border: 0.1rem solid blue;
    display: flex;
    flex-direction: column;
    align-items: center;
}

Exercice 2

Utilisation de requêtes média.

1. Crée un bloc simple contenant un titre, avec :

   • de l'espacement intérieur (padding)
   • des couleurs de fond différentes

   

2. En appliquant le flex sur le bloc parent, positionne le titre au centre du bloc :

   

3. Avec des requêtes média, modifie l'apparence des blocs selon les indications suivantes :

   • Sur écrans d'au moins 600px

     • modifier la couleur de fond du bloc principal
     • souligner le titre

   • Sur écrans d'au moins 1000px

     • augmenter l'espacement intérieur du parent
     • modifier la couleur de fond du titre

4. Redimensionne la taille du navigateur pour tester et assure-toi que ton interface change d'apparence sur les 3 tailles :

   • Petit écran (par défaut)
   • Écran d'au moins 600px
   • Écran d'au moins 1000px

   

Solution

HTML

<div id="exercice2">
    <h1>Exercice 2 : requêtes média</h1>
</div>

CSS

#exercice2 {
    background-color: azure;
    padding:3rem;
    display: flex;
    justify-content: center;
}

#exercice2 h1 {
    background-color: beige;
    padding: 3rem;
}

@media screen and (min-width:600px) {
    #exercice2 {
        background-color: plum;
    }

    #exercice2 h1{
        text-decoration: underline;
    }
}

@media screen and (min-width:900px) {
    #exercice2 {
        padding: 5rem;
    }

    #exercice2 h1{
        background-color: aqua;
    }
}