Cours CSS Flexbox et Grid : maîtriser la mise en page

Quelle déclaration transforme un élément en conteneur Flexbox pour aligner ses enfants sur un axe ?

display: flex; flex-direction: row; align-items: flex; position: flex;

Dans un conteneur Flexbox, quelle propriété répartit les éléments le long de l’axe principal ?

align-items justify-content flex-wrap grid-template-columns

Quelle propriété définit un espacement régulier entre les éléments d’une navigation Flexbox, sans ajouter de marges à chacun ?

flex-basis justify-content gap align-items

Quelle déclaration permet aux éléments d’une navigation Flexbox de passer sur une nouvelle ligne lorsque l’espace manque ?

flex-direction: column; justify-content: space-between; align-items: stretch; flex-wrap: wrap;

Pour structurer une zone de conseils en lignes et en colonnes, quel modèle de mise en page est le plus adapté ?

CSS Grid Flexbox Les flottants Le positionnement absolu

Quelle propriété CSS sert à déclarer un modèle de zones de grille nommées ?

grid-area grid-template-areas grid-column grid-auto-rows

Une zone nommée « contact » est définie dans le modèle de grille. Quelle déclaration associe un élément à cette zone ?

grid-template-areas: contact; grid-column: contact; grid-area: contact; grid-row: contact;

Quelle déclaration place explicitement un élément de grille entre les lignes 2 et 4 des colonnes ?

grid-area: 2 / 4; grid-row: 2 / 4; grid-template-columns: 2 / 4; grid-column: 2 / 4;

Comment choisir une largeur de rupture pour adapter la page à un écran plus étroit ?

La choisir lorsque le contenu ne tient plus de façon lisible dans la mise en page actuelle Utiliser systématiquement la même largeur de rupture pour tous les projets Définir une rupture uniquement d’après la taille du modèle d’appareil visé Ajouter une media query pour chaque élément de la page

Sur un petit écran, quelle déclaration réoriente verticalement les éléments d’un conteneur Flexbox ?

flex-wrap: wrap; flex-direction: column; justify-content: center; grid-template-columns: 1fr;

Une carte Grid déborde parce que son contenu impose une largeur minimale trop importante à l’élément. Quelle règle peut permettre à cet élément de rétrécir ?

flex-wrap: wrap; grid-template-areas: none; min-width: 0; justify-content: space-between;

Quel outil du navigateur aide à visualiser les lignes et les zones d’un conteneur Grid pendant le diagnostic d’un mauvais placement ?

Le mode appareil, utilisé seul La console JavaScript L’onglet réseau L’overlay Grid de l’inspecteur