L
a maîtrise des systèmes de mise en page modernes en CSS est devenue indispensable pour concevoir des interfaces web claires, flexibles et professionnelles.
Flexbox et CSS Grid constituent aujourd’hui les deux piliers fondamentaux pour organiser le contenu d’une page de manière efficace et cohérente.
Ils sont largement utilisés dans les projets web actuels, aussi bien en formation qu’en milieu professionnel.
Ces technologies permettent de gérer l’alignement, la distribution de l’espace et l’adaptation automatique aux différentes tailles d’écran.
Elles apportent des solutions élégantes à des problématiques courantes comme l’organisation en colonnes, l’empilement d’éléments ou la création de structures complexes sans calculs fastidieux.
Comprendre leurs principes est essentiel pour réussir des examens, des concours techniques ou des projets concrets.
Cette série de QCM s’inscrit dans une démarche pédagogique visant à renforcer la compréhension des mécanismes fondamentaux de Flexbox et de CSS Grid, tout en développant une vision structurée de la mise en page moderne.
La maîtrise des systèmes de mise en page modernes en CSS est devenue indispensable pour concevoir des interfaces web claires, flexibles et professionnelles.
Flexbox et CSS Grid constituent aujourd’hui les deux piliers fondamentaux pour organiser le contenu d’une page de manière efficace et cohérente.
Ils sont largement utilisés dans les projets web actuels, aussi bien en formation qu’en milieu professionnel.
Ces technologies permettent de gérer l’alignement, la distribution de l’espace et l’adaptation automatique aux différentes tailles d’écran.
Elles apportent des solutions élégantes à des problématiques courantes comme l’organisation en colonnes, l’empilement d’éléments ou la création de structures complexes sans calculs fastidieux.
Comprendre leurs principes est essentiel pour réussir des examens, des concours techniques ou des projets concrets.
Cette série de QCM s’inscrit dans une démarche pédagogique visant à renforcer la compréhension des mécanismes fondamentaux de Flexbox et de CSS Grid, tout en développant une vision structurée de la mise en page moderne.
QCM
1
Corrigé
Quelle propriété Flexbox permet de forcer les éléments à passer à la ligne s'ils manquent d'espace ?
A. flex-flow
B. flex-wrap
C. flex-direction
D. align-content
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Par défaut, les éléments flex tentent de tenir sur une seule ligne. 'flex-wrap: wrap' autorise le passage à la ligne.
QCM
2
Corrigé
En CSS Grid, quelle unité permet de définir une colonne comme une 'part de l'espace disponible' ?
A. px
B. %
C. fr
D. em
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
L'unité 'fr' (fraction) calcule automatiquement l'espace restant après l'allocation des unités fixes.
QCM
3
Corrigé
Quelle propriété Flexbox aligne les éléments sur l'axe principal (horizontal par défaut) ?
A. align-items
B. justify-items
C. align-content
D. justify-content
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
D
Justification :
'justify-content' gère la répartition des éléments sur l'axe de lecture (main axis).
QCM
4
Corrigé
Comment définir une grille avec 3 colonnes de largeur identique en une seule ligne ?
A. grid-template-columns: 33% 33% 33%;
B. grid-template-columns: repeat(3, 1fr);
C. grid-columns: 1fr 1fr 1fr;
D. grid-template-columns: 1fr 3;
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
La fonction 'repeat()' simplifie la déclaration de colonnes ou lignes redondantes.
QCM
5
Corrigé
Quelle valeur de 'justify-content' place un espace égal entre les éléments, mais aucun aux extrémités ?
A. space-around
B. space-evenly
C. space-between
D. center
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
'space-between' colle le premier élément au début et le dernier à la fin du conteneur.
QCM
6
Corrigé
Que fait la propriété 'align-self' dans un conteneur Flexbox ?
A. Aligne tous les enfants en même temps
B. Permet à un enfant spécifique d'ignorer l'alignement général du parent
C. Définit la taille de l'élément
D. Inverse l'ordre des éléments
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
'align-self' permet de surcharger la propriété 'align-items' du parent pour un seul élément.
QCM
7
Corrigé
Quelle propriété CSS Grid permet de nommer des zones de la grille pour faciliter le placement ?
A. grid-areas
B. grid-template-parts
C. grid-template-areas
D. grid-name-zones
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Cette propriété permet de dessiner visuellement la structure du site avec des noms (ex: 'header header').
QCM
8
Corrigé
Comment faire en sorte qu'un élément Flexbox occupe tout l'espace vide restant ?
A. flex-grow: 1;
B. flex-shrink: 0;
C. flex-basis: 100%;
D. flex-fill: true;
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
'flex-grow' définit la capacité d'un élément à s'étirer pour remplir l'espace libre.
QCM
9
Corrigé
Dans une grille, que signifie 'grid-column: 1 / 3;' ?
A. L'élément occupe la colonne 1 et la colonne 3
B. L'élément commence à la ligne de grille 1 et s'arrête avant la 3
C. L'élément est divisé en 3 parties
D. L'élément occupe 1/3 de la largeur totale
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Les chiffres font référence aux lignes de séparation (grid lines), donc l'élément couvre deux colonnes.
QCM
10
Corrigé
Quelle propriété définit la taille par défaut d'un élément flex avant la répartition de l'espace ?
A. width
B. flex-size
C. flex-basis
D. basis-width
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
'flex-basis' définit la base de calcul pour le redimensionnement de l'élément.
QCM
11
Corrigé
Quelle propriété Grid permet d'aligner le contenu d'une cellule sur l'axe horizontal ?
A. align-content
B. justify-items
C. vertical-align
D. place-content
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
'justify-items' (ou justify-self) gère l'alignement 'inline' (horizontal) dans une grille.
QCM
12
Corrigé
En mode Flexbox, si 'flex-direction' est 'column', que fait 'justify-content' ?
A. Aligne les éléments horizontalement
B. Aligne les éléments verticalement
C. Change la couleur de fond
D. Définit l'espacement entre les lettres
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Lorsque l'axe principal devient vertical (column), 'justify-content' agit verticalement.
QCM
13
Corrigé
Quelle fonction CSS Grid permet de créer des colonnes qui s'adaptent sans media queries ?
A. auto-fill
B. fit-content()
C. minmax()
D. repeat(auto-fit, ...)
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
D
Justification :
Combiné avec 'minmax', 'auto-fit' crée des grilles responsives sans écrire de @media.
QCM
14
Corrigé
Que permet de définir la propriété 'gap' ?
A. L'espace autour du conteneur
B. L'espace uniquement entre les colonnes
C. L'espace entre les éléments (lignes et colonnes) sans marges extérieures
D. La taille des bordures
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
'gap' remplace 'grid-gap' et fonctionne désormais aussi en Flexbox.
QCM
15
Corrigé
Quelle propriété empêche un élément Flex de rétrécir même si l'espace est restreint ?
A. flex-shrink: 0;
B. flex-grow: 0;
C. flex-basis: auto;
D. overflow: visible;
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
Une valeur de 0 pour 'flex-shrink' interdit au navigateur de réduire l'élément.
QCM
16
Corrigé
Dans CSS Grid, que fait 'grid-auto-rows' ?
A. Définit la taille des lignes créées explicitement
B. Définit la taille des lignes créées automatiquement (implicites)
C. Aligne les lignes au centre
D. Supprime les lignes vides
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Si vous avez plus de contenu que de lignes prévues, Grid crée des lignes 'implicites' avec cette taille.
QCM
17
Corrigé
Quelle propriété Flexbox permet de changer l'axe principal pour que les éléments soient empilés ?
A. flex-stack
B. flex-direction: column;
C. display: block;
D. align-items: stretch;
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Par défaut 'row', passer à 'column' empile les éléments les uns sous les autres.
QCM
18
Corrigé
Comment placer un élément Grid dans une zone nommée 'sidebar' ?
A. grid-column: sidebar;
B. grid-area: sidebar;
C. grid-template-areas: sidebar;
D. place-in: sidebar;
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
'grid-area' permet d'assigner un élément à un nom défini dans 'grid-template-areas'.
QCM
19
Corrigé
Quelle est la différence entre 'justify-content' et 'align-content' ?
A. Aucune, ils font la même chose
B. L'un est pour Flex, l'autre pour Grid
C. L'un gère l'axe principal, l'autre l'axe secondaire (quand il y a plusieurs lignes)
D. L'un gère les marges, l'autre le padding
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
'align-content' n'a d'effet que s'il y a plusieurs lignes d'éléments (flex-wrap actif).
QCM
20
Corrigé
Que fait 'justify-self: center;' dans une cellule de grille ?
A. Centre le texte à l'intérieur de l'élément
B. Centre l'élément lui-même horizontalement dans sa cellule
C. Centre la grille entière sur la page
D. Aligne l'élément verticalement
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Contrairement à Flexbox, CSS Grid permet d'aligner un élément individuellement dans son espace réservé.
Mots & Définitions
Consultez les définitions des termes importants.
Flexbox est un modèle de mise en page CSS conçu pour organiser des éléments dans une direction principale, en ligne ou en colonne. Il facilite l’alignement, la distribution de l’espace et l’adaptation des éléments selon la taille du conteneur. C’est un outil fondamental pour créer des interfaces souples et réactives.
CSS Grid est un système de mise en page bidimensionnel qui permet de structurer une page en lignes et en colonnes. Il offre un contrôle précis sur le positionnement des éléments. Il est particulièrement adapté aux mises en page complexes et structurées.
L’axe principal correspond à la direction selon laquelle les éléments sont disposés dans un conteneur Flexbox. Il dépend de l’orientation choisie, horizontale ou verticale. De nombreuses propriétés d’alignement agissent directement sur cet axe.
L’axe secondaire est perpendiculaire à l’axe principal dans Flexbox. Il sert à gérer l’alignement transversal des éléments. Comprendre la relation entre les deux axes est essentiel pour maîtriser les alignements.
L’unité fr représente une fraction de l’espace disponible dans une grille CSS. Elle permet de répartir l’espace de manière proportionnelle entre les colonnes ou les lignes. C’est une unité clé pour des grilles flexibles et équilibrées.
L’alignement du contenu désigne la manière dont les éléments sont positionnés à l’intérieur d’un conteneur ou d’une cellule. Il peut s’agir d’un alignement horizontal ou vertical. Ces réglages influencent directement la lisibilité et l’esthétique de la mise en page.
Flex-wrap contrôle le comportement des éléments Flexbox lorsque l’espace disponible est insuffisant. Il permet d’autoriser ou non le passage à la ligne. Cette propriété est essentielle pour des mises en page adaptatives.
Flex-basis définit la taille initiale d’un élément flexible avant la répartition de l’espace restant. Elle sert de point de départ aux calculs de Flexbox. Cette notion aide à comprendre le dimensionnement des éléments.
Les zones de grille permettent de nommer des parties spécifiques d’une grille CSS. Elles rendent le placement des éléments plus lisible et plus intuitif. Cette approche améliore la clarté du code et la maintenance.
La propriété gap définit l’espace entre les éléments d’une grille ou d’un conteneur flexible. Elle agit uniquement sur les séparations internes, sans créer de marges externes. Cela simplifie la gestion des espacements.
Align-self permet à un élément individuel de définir son propre alignement, indépendamment des autres. Il peut ainsi déroger aux règles générales du conteneur. Cette propriété offre un contrôle fin et ciblé.
Justify-content gère la répartition de l’espace le long de l’axe principal. Il permet de positionner les éléments en début, en fin, au centre ou avec des espacements réguliers. C’est une notion clé pour structurer visuellement une ligne ou une colonne.
À propos de ce QCM
L
es notions abordées dans ces QCM couvrent les fondements de la mise en page avancée en CSS.
Flexbox est utilisé pour organiser des éléments selon un axe principal, avec une gestion fine de l’alignement et de la répartition de l’espace.
Il permet de créer des structures souples, capables de s’adapter naturellement aux contraintes d’affichage.
La compréhension des axes, des tailles de base et du comportement des éléments est essentielle pour exploiter tout son potentiel.
CSS Grid complète cette approche en offrant une vision bidimensionnelle de la mise en page.
Il permet de structurer une page en lignes et en colonnes, de définir des zones nommées et de contrôler précisément le placement du contenu.
Les unités spécifiques, comme les fractions de l’espace disponible, rendent les grilles flexibles et faciles à ajuster sans calculs complexes.
Les questions mettent également l’accent sur les mécanismes d’alignement et d’espacement, qui jouent un rôle majeur dans la lisibilité et l’ergonomie d’une interface.
Savoir gérer les écarts entre les éléments, aligner un contenu dans une cellule ou ajuster le comportement individuel d’un composant fait partie des compétences attendues d’un développeur web.
Travailler ces QCM permet de renforcer la compréhension théorique tout en développant une capacité d’analyse pratique.
L’apprenant progresse dans sa maîtrise des outils CSS modernes, gagne en autonomie et se prépare efficacement aux exigences académiques et professionnelles liées au développement front-end.
Conclusion
C
es QCM offrent une base solide pour consolider les compétences essentielles en Flexbox et CSS Grid.
Ils permettent de mieux comprendre la logique des mises en page modernes et d’acquérir des réflexes utiles pour concevoir des interfaces claires et adaptables.
En s’exerçant régulièrement, l’apprenant renforce sa maîtrise des concepts, identifie plus facilement ses points de progression et gagne en confiance.
Cette démarche favorise une montée en compétences progressive et durable, indispensable pour réussir dans les études, les concours ou les projets web professionnels.
