Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Ecole Supérieure Privée de technologies et d'ingénierie TEK-UP Cours assuré par

Ecole Supérieure Privée de technologies et d'ingénierie TEK-UP Cours assuré par : Takwa Souihi Section : 2 ème DMWM TP4 Responsive Web design Correction TP4 Flexbox Vous trouvez le code source du chaque exercice dans le fichier correction_TP_Flexbox Exercice1 : La section est un conteneur flexible et contient neuf éléments Flex <section> <div><span>1</span></div> <div><span>2</span></div> <div><span>3</span></div> <div><span>4</span></div> <div><span>5</span></div> <div><span>6</span></div> <div><span>7</span></div> <div><span>8</span></div> <div><span>9</span></div> </section> Pour occuper tout le viewport avec les boîtes basculées à la verticale. Le conteneur flexible devient flexible en définissant le display propriété sur Flex section { display: flex; } Exercice 1.2 : Pour autoriser le retour à la ligne, on utilise la propriété Flex-wrap Flex-wrap: donne la possibilité aux éléments Flex de s'enrouleront si nécessaire, donc les éléments placés côte à côte avec la possibilité d'un retour à la ligne si possible en déterminant leur largeur : width: 25%; section { display: flex; flex-wrap: wrap; } section div { width: 25%; } Ecole Supérieure Privée de technologies et d'ingénierie TEK-UP Cours assuré par : Takwa Souihi Section : 2 ème DMWM Exercice 1.3 : Appliquer des marges aux boîtes Centrer le contenu avec align aitems==center et justify content ==center section { display: flex; flex-wrap: wrap; width: 95%; margin-left: auto; margin-right: auto; justify-content: space-between; align-items: center; align-content: center; } section div { height: 500px; width: 24%; margin-bottom: 10px; margin-top: 10px; display: flex; align-items: center; justify-content: center; } 2. modifier la composition par les media queries Exercice 2.1 : 1. Sélectionner l'élément enfant num5 2. modifier la largeur de la boîte 5 pour qu'elle étendre à toute la largeur section div:nth-child(5) { width: 100%; } Exercice 2.2 : Sur les écrans de 1024px ou moins on passe de 4 à 2 colonnes par ligne et la taille des boites (largeur/hauteur plus grand)) Ecole Supérieure Privée de technologies et d'ingénierie TEK-UP Cours assuré par : Takwa Souihi Section : 2 ème DMWM @media(max-width:1024px) { section div { height: 300px; width: 49%; } } Exercice 2.3 : Sur les écrans de 600px ou moins on passe de 2 à 1 colonne par ligne et la taille d'une boite prend largeur de la ligne @media(max-width:600px) { section div { height: 200px; width: 100%; } 3. centrer les contenus Exercice 3 : On garde le mode la mise en page du conteneur flexible (section==élément parent) avec deux éléments enfants (deux boites). On centralise les boîtes au centre du conteneur horizontalement et verticalement les éléments (section>div) Code HTML <section> <div><span>1</span></div> <div><span>2</span></div> </section> Code CSS section { display: flex; align-items: center; justify-content: center; } section div { margin: 10px; width: 200px; height: 200px; Ecole Supérieure Privée de technologies et d'ingénierie TEK-UP Cours assuré par : Takwa Souihi Section : 2 ème DMWM display: flex; align-items: center; justify-content: center; } 4. changer l'orientation et l'agrandissement Exercice 4 : On réparti les contenus sur en colonnes avec display flex ,flex-wrap: wrap;et flex-direction: column; section { height: 100vh; display: flex; flex-wrap: wrap; flex-direction: column; align-items: stretch; align-content: stretch; width: 95%; margin-left: auto; margin-right: auto; } Soit largeur de la section 100%  On doit répartir le conteneur sur 3 colonnes centrées  Donc 33% pour chaque boite (99%) avec deux espaces entre les colonnes1et2. Chaque boite prend 33% de largeur de la section - 20px, et la même chose pour la hauteur La hauteur de chaque boite est 25% de la section. On modifie la taille des boites qui prennent 33% de largeur de la section et l'espace entre les boites de 20px. section div { width: calc(33% - 20px); height: calc(25% - 20px); margin: 10px; display: flex; align-items: center; justify-content: center; } Ecole Supérieure Privée de technologies et d'ingénierie TEK-UP Cours assuré par : Takwa Souihi Section : 2 ème DMWM Modifier la hauteur du dernier boite== hauteur de l'écran section div:last-child { height: 100%; } 5. menu responsive Exercice 5.1: Soit le menu responsive suivant : <ul> <li><a href="#">lien 1</a></li> <li><a href="#">lien 2</a></li> <li><a href="#">lien 3</a></li> <li><a href="#">lien 4</a></li> <li><a href="#">lien 5</a></li> </ul>  Présenter le menu à l'horizontal Etendre la surface cliquable à chaque la surface colorée.  Etendre la surface cliquable à chaque la surface colorée ul { display: flex; align-items: center; justify-content: center; height: 80px; width: 100%; } ul li { flex: 1; height: 50px } ul li a { display: block; width: 100%; height: 100%; } Exercice 5.2 : A partir d'une résolution inférieur à 600px le menu se présenter à la verticale avec la spécification de la direction des flex(flex-direction: column). Ecole Supérieure Privée de technologies et d'ingénierie TEK-UP Cours assuré par : Takwa Souihi Section : 2 ème DMWM @media(max-width:600px) { ul { flex-direction: column; height: auto; } } Exercice 5.3 : Au survol, étirer le <li>.étirer le <li> ul li:hover { height: 80px; } ul li:hover a { line-height: 80px; } ul li a { display: block; width: 100%; height: 100%; } EXERCICE6.1 hauteur de main (la page) 100% de hauteur de la page - 160px(80px hauteur du header+ hauteur du footer)*2 code css html, body { height: 100%; min-height: 500px; } main { display: flex; height: calc(100% - 160px); } /**le menu =>a une largeur fixe de 200px fixe**/ main nav { width: 200px; } Ecole Supérieure Privée de technologies et d'ingénierie TEK-UP Cours assuré par : Takwa Souihi Section : 2 ème DMWM Exercice6.2 : Le menu passe sous l'article avec un breakpoint à 600px de large on donne ordre 1 pour l'article et ordre 2 pour le menu=main pour afficher Le menu sous l'article. @media(max-width:600px) { main { flex-direction: column; } main article { order: 1; } main nav { width: 100%; order: 2; } } uploads/Litterature/ correction-tp-flexbox.pdf