Adloun

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

Grid ou Flexbox ?

Grid · niveau 1 (application)

Énoncé

Pour chacune de ces mises en page, choisir Grid ou Flexbox et justifier en une phrase :

les cinq liens du menu de la Librairie ;
la grille des couvertures du catalogue ;
les étiquettes de rayons d'un livre (« Informatique », « Java », « Débutant »), de longueurs différentes ;
un formulaire dont les étiquettes doivent toutes s'aligner dans une colonne ;
un calendrier mensuel ;
un bouton contenant une icône et un texte centrés verticalement.

Flexbox : des liens de longueurs différentes, posés à la suite, qui passent à la ligne si besoin.
Grid : des colonnes égales, des cartes alignées dans les deux directions, une dernière rangée qui reste dans ses colonnes.
Flexbox (avec flex-wrap: wrap et gap) : c'est la longueur de chaque étiquette qui décide de sa largeur.
Grid : les étiquettes de toutes les lignes doivent partager la même colonne ; c'est une contrainte en deux dimensions.
Grid : sept colonnes fixées à l'avance, des semaines en rangées.
Flexbox : deux éléments sur une ligne, centrés par align-items: center (Grid conviendrait aussi, mais rien n'est en deux dimensions ici).

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.