CSS : mettre en forme le Web (école d'ingénieur) · Chapitre 7 · Application directe du cours

Quel axe ?

Flexbox · niveau 1 (application)

Énoncé

Un conteneur a display: flex, flex-direction: column et une hauteur de 400 pixels ; il contient trois éléments de 50 pixels de haut.

Quel est l'axe principal ? L'axe secondaire ?
Que fait justify-content: space-between ? Donner l'ordonnée du haut de chaque élément, par rapport au conteneur.
Que fait align-items: center ?
Et align-items: stretch, si les éléments n'ont pas de largeur fixée ?

En column, l'axe principal est vertical (de haut en bas), l'axe secondaire horizontal.
justify-content agit sur l'axe principal, donc verticalement. Espace libre : $400 - 3 \times 50 = 250$ , deux intervalles de 125. Ordonnées : 0, 175, 350.
align-items agit sur l'axe secondaire : chaque élément garde la largeur de son contenu et est centré horizontalement.
Avec stretch, chaque élément prend toute la largeur du conteneur, comme des blocs dans le flux normal.

100 % gratuit

La suite du chapitre est sur Adloun

Sans compte : le cours et le premier QCM. Exercices et tuteur : inscription gratuite en 30 secondes, sans carte bancaire.