Exercice 10 - Positionnement avec Flexbox

Modalités

À faire (étapes)

Effectuez les opérations demandées

  1. Préparation

    • Créer le dossier « exercice10 » dans votre espace de cours.
    • Transférez les fichiers complets d'une structure standard d'un site dans ce dossier
    • Ajoutez le dossier dans Visual Studio Code
    • Ouvrez le fichier index.html dans l’éditeur et votre navigateur.
  2. Dans la section head changez le contenu de la balise title, pour :

    • Exercice 10 – Positionnement avec Flexbox
  3. Dans la section body

    • Ajoutez les balises essentielles header, main et footer à votre HTML
  4. Insérez le code HTML suivant dans la balise main

    <div class="flex-elements">
        <img src="https://via.placeholder.com/150?text=image1" alt="image temporaire">
    </div>
    <div class="flex-elements">
        <img src="https://via.placeholder.com/150?text=image2" alt="image temporaire">
    </div>
    <div class="flex-elements">
        <img src="https://via.placeholder.com/150?text=image3" alt="image temporaire">
    </div>
    <div class="flex-elements">
        <img src="https://via.placeholder.com/150?text=image4" alt="image temporaire">
    </div>
  5. Sauvegardez le fichier HTML. (ctrl+s)

  6. Faites afficher le fichier index.html dans le navigateur.

  7. Ouvrez le fichier CSS sous css/main.css

  8. Inscrivez les lignes suivantes (remplacez Mon Nom avec votre nom) :
    Vous devriez savoir maintenant à quoi servent ces lignes (sauf pour le .flex-container, mais on va y revenir...)

    /* Auteur : Votre nom */
    *{
        box-sizing: border-box;
    }
    html, body, main{
        height: 100%;
    }
    .flex-container{
        display:flex;
    }
  9. Sauvegardez le fichier CSS. (ctrl+s)

  10. À l’aide de la propriété background-color, ajoutez une couleur de fond pour les divs avec la classe flex-elements

  11. À l’aide de la propriété padding, ajoutez un espacement de 5px pour les divs avec la classe flex-elements

  12. Sauvegardez le fichier CSS. (ctrl+s)

  13. Entourez vos 4 boîtes d’une balise div avec la classe flex-container
    Cette division sera votre conteneur flex

  14. Sauvegardez le fichier HTML. (ctrl+s)

  15. Testez dans le navigateur.

  16. De retour dans le fichier CSS, inscrivez les lignes suivantes dans la classe .flex-elements sous la couleur de fond et le padding

        flex-grow: 0;
        flex-shrink: 1;
        flex-basis:auto;
  17. Sauvegardez le fichier CSS. (ctrl+s)

  18. Testez dans le navigateur vos changements.

  19. Ajoutez les lignes suivantes dans le fichier CSS

    .flex-elements img{
        max-width:100%;
        height:auto;
    }
  20. Testez dans le navigateur en redimensionnant la largeur de la fenêtre, vous devriez avoir des résultats !

  21. Ajoutez dans la classe .flex-container la propriété suivante: justify-content: ???;

  22. Trouvez la bonne valeur de propriété de justify-content qui va faire l'affichage suivant:

  23. Ajoutez dans la classe .flex-container la propriété suivante: flex-wrap: wrap;

  24. Testez dans le navigateur en redimentionnant la largeur de la fenêtre

IMPORTANT: Conservez cet exercice, il pourrait grandement vous aider pour le travail pratique 01 !

Pour aller plus loin…

  1. Faites des changements de valeurs pour la propriété suivante dans la classe .flex-elements:
    flex-basis : auto; Remettez ensuite la valeur à auto

    Valeurs intéressantes à tester :

    • 50%
    • 50vw
    • 50px

    Ressource sur les CSS Units

  2. Inversez l'affichage des boites en utilisant la propriété flex-direction: column; et le height:100%; dans la classe .flex-container

  3. Changez l'alignement de l'image1 (flex-start) et l'image2 (flex-end) en utilisant la propriété align-self.

    • indice utilisez des classes indépendantes .flex-element1 .flex-element2)
  4. Inversez l'ordre de l'image1 et l'image2 en utilisant la propriété order.

    • indice utilisez des classes indépendantes .flex-element1 .flex-element2 .flex-element3, .flex-element4)
  5. Jouez à Flexbox Froggy!