Remerciez-le!

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

Correction tp flexbox Ecole Supérieure Privée de technologies et d'ingénierie TEK-UP Cours assuré par Takwa Souihi Section ème DMWM TP Responsive Web design Correction TP Flexbox Vous trouvez le code source du chaque exercice dans le ?chier correctionTPFl

Ecole Supérieure Privée de technologies et d'ingénierie TEK-UP Cours assuré par Takwa Souihi Section ème DMWM TP Responsive Web design Correction TP Flexbox Vous trouvez le code source du chaque exercice dans le ?chier correctionTPFlexbox Exercice La section est un conteneur exible et contient neuf éléments Flex Pour occuper tout le viewport avec les bo? tes basculées à la verticale Le conteneur exible devient exible en dé ?nissant le display propriété sur Flex section display ex Exercice 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 section display ex ex-wrap wrap section div width CEcole Supérieure Privée de technologies et d'ingénierie TEK-UP Cours assuré par Takwa Souihi Section ème DMWM Exercice Appliquer des marges aux bo? tes Centrer le contenu avec align aitems center et justify content center section display ex ex-wrap wrap width margin-left auto margin-right auto justify-content space-between align- items center align-content center section div height px width margin-bottom px margin-top px display ex align-items center justify-content center modi ?er la composition par les media queries Exercice Sélectionner l'élément enfant num modi ?er la largeur de la bo? te pour qu'elle étendre à toute la largeur section div nth-child width Exercice Sur les écrans de px ou moins on passe de à colonnes par ligne et la taille des boites largeur hauteur plus grand CEcole Supérieure Privée de technologies et d'ingénierie TEK-UP Cours assuré par Takwa Souihi Section ème DMWM media max-width px section div height px width Exercice Sur les écrans de px ou moins on passe de à colonne par ligne et la taille d'une boite prend largeur de la ligne media max-width px section div height px width centrer les contenus Exercice On garde le mode la mise en page du conteneur exible 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 Code CSS section display ex align-items center justify-content center section div margin px width px height px CEcole Supérieure Privée de technologies et d'ingénierie TEK-UP Cours assuré par Takwa Souihi Section ème DMWM display ex align-items center justify-content center changer l'orientation et l'agrandissement Exercice On réparti les contenus sur en colonnes avec display ex ex-wrap wrap et ex- direction column section height vh display ex ex-wrap wrap ex-direction column align-items stretch align-content stretch width margin-left auto margin-right auto Soit largeur de la section On doit répartir le conteneur sur colonnes centrées Donc pour chaque boite avec deux espaces entre les colonnes et Chaque boite prend de largeur de la section - px et la même chose pour la hauteur La hauteur de chaque boite est de la section On modi ?e la taille des boites qui prennent de largeur de la section et l'espace entre les boites de px