CSS : mettre en forme le Web (école d'ingénieur) · Chapitre 7 · Application directe du cours
Répartir quatre éléments
Flexbox · niveau 2
Énoncé
Quatre éléments de 100 pixels sont placés dans un conteneur flex de 600 pixels. Calculer l'abscisse de chacun (par rapport au conteneur) pour space-between, space-around et space-evenly. Que donne justify-content: center avec gap: 20px ?
Corrigé
Espace libre : .
space-between: 3 intervalles de 66,67 ; abscisses 0, 166,67, 333,33, 500.space-around: chaque élément reçoit , 25 de chaque côté ; abscisses 25, 175, 325, 475.space-evenly: 5 intervalles égaux de 40 ; abscisses 40, 180, 320, 460.
Les trois répartitions ont été vérifiées dans Chromium. Avec center et gap: 20px, l'espace libre est , 70 de chaque côté : abscisses 70, 190, 310, 430.
100 % gratuit
La suite du chapitre est sur Adloun
- 10 autres exercices corrigés dans ce chapitre
- Les 2 QCM du chapitre, le premier sans compte
- Le tuteur, qui guide pas à pas sans donner la réponse
Sans compte : le cours et le premier QCM. Exercices et tuteur : inscription gratuite en 30 secondes, sans carte bancaire.