Scribd Logo
Importer

Bienvenue sur Scribd !

  • TP9 Web-Flexbox

    Transféré par

    Root TOR
    110 vues8 pages

    Titre original

    TP9_Web-Flexbox

    Copyright

    © © All Rights Reserved

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    110 vues8 pages

    TP9 Web-Flexbox

    Transféré par

    Root TOR

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 8

    TP 9 : Exercices complémentaires

    sur les FlexBox


    Exercice 1
    Soit le code CSS suivant :
    .ma-flexbox {
    display: flex ;
    flex-direction: row ;
    background-color: blue ;
    width: 190px ;
    height: 70px ;
    }
    .ma-zone-texte {
    display: flex ;
    color: red ;
    background-color: yellow ;
    width: 50px ;
    height: 50px ;
    border-style: solid ;
    justify-content: space-around ;
    }

    et un fichier ​index.html​ :

    <html>
    <head>
    ​<link rel = "stylesheet" type = "text/css" href = "styles.css">
    </head>
    <body>
    <h1>​ Exemple flexbox 1 ​</h1>
    <div class = "​ma-flexbox​">
    <div class = "​ma-zone-texte​"> ​1​ </div>
    <div class = "​ma-zone-texte​"> ​2​ </div>
    <div class = "​ma-zone-texte​"> ​3​ </div>
    </div>
    </body>
    </html>

    Question 1
    Taper le code des deux fichiers et tester le résultat avec Chrome.

    Question 2
    Ajouter à ​.ma-flexbox​ la ligne suivante : ​justify-content: space-evenly ;
    et changer dans ​.ma-zone-texte la ligne ​height: 50px ; par ​height: 90% ​:
    tester.

    Exercice 2
    Ecrire un fichier ​style.css permettant d’afficher les ​flexbox ​et ​divisions selon
    le schéma ci-dessous en sachant que :

    - ​flex-principale​ (rouge) prend tout l’espace du corps de la page web.


    - ​flex-bandeau​ (jaune) a une largeur fixe de ​120 px​.
    - ​flex-contenu (bleu) affiche les infos en colonne et a une largeur (width) de
    80%.
    - ​info (cyan) n’est ​pas une Flexbox et affichera du HTML classique avec une
    marge (margin) de 5 px et une largeur de 80%.

    Ecrire les fichiers ​index.html​ et ​syles.css​ permettant d’afficher la page :

    Exercice 3
    Question 1
    Ecrire un fichier ​html et ​style.css avec une flexbox ​flex-menu ​permettant
    d’afficher un menu en haut d’une page web comme suit :

    Données : le fond du menu est ​gris​, le texte des choix est en ​<h3>​, le contenu
    est justifié avec ​space-around​.
    Question 2
    Pour rendre la page Responsive, ajouter dans le fichier CSS le code ​@media
    adéquat pour que, quand la largeur de la page est plus petite que ​512 pixels​,
    l’alignement des ​Choix​ se fasse verticalement :

    Exercice 4
    Ecrire un fichier ​style.css avec une flexbox ​flex-mosaique ​permettant
    d’afficher une mosaïque d’images :
    Le fichier HTML est donné :

    <body>
    <div class="flex-mosaique">
    <img src="https://picsum.photos/536" >
    <img src="https://picsum.photos/200" >
    <img src="https://picsum.photos/530" >
    <img src="https://picsum.photos/50" >
    <img src="https://picsum.photos/150" >
    <img src="https://picsum.photos/250" >
    <img src="https://picsum.photos/300" >
    </div>
    </body>

    Fichier CSS :

    .flex-mosaique {

    .flex-mosaique img { /* s’applique aux image DANS flex-mosaique */

    Exercice 5
    Question 1
    Ecrire le fichier ​index.html pour réaliser le gabarit ci-dessous. Le fichier
    style.css est donné. Pour rappel, l’option ​flex-wrap: wrap; permet aux
    éléments de s’ajouter les uns après les autres puis de passer à la ligne suivante
    s’ils débordent.
    CSS

    .flex100 {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    }
    .flex50 {
    display: flex;
    flex-wrap: wrap;
    width: 50%;
    }

    Ecrire le code HTML

    Question 2
    Si la largeur de la page est inférieure à 450, le gabarit devra devenir le suivant :
    Exercice 6
    Ecrire les fichiers ​style.css et ​index.html pour réaliser le gabarit suivant. Pour
    information, ​Nav ​et ​Divers ​partagent le même type de ​flexbox ​qu’on appellera
    .bandeau-v (pour vertical) de largeur ​128px et de couleur ​cyan​. De même
    pour ​Entête ​et ​Pieds ​avec ​.bandeau-h (pour horizontal) de hauteur ​64px et
    de couleur jaune (yellow). Indice : utiliser une flexbox ​.milieu qui contiendra
    Nav​, ​Article​ et ​Divers​.

    Exercice 7
    Question 1
    Ecrire les fichiers ​style.css et ​index.html pour réaliser le gabarit ci-dessous. On
    utilisera des ​Flexbox ​de notre choix, en sachant qu’il existe plusieurs solutions.
    Pour info, l’article occupe 80% de son container, Nav fait 128 px et Divers
    occupe 20 % de son container. Pieds occupe 100% de la largeur de son
    container.

    Question 2
    Si la largeur de la page est inférieure à 450, le gabarit devra devenir le suivant :
    Modifier le fichier CSS en conséquence.

    Exercice 8 (pour les supers-champions !)


    Ecrire les fichiers ​style.css​ et ​index.html​ pour réaliser le gabarit suivant :

    Vous aimerez peut-être aussi