Quiz: Maîtrise de Flexbox en CSS — 18 domande

1. Quel est le rôle principal de Flexbox en mise en page CSS ?

A. Définir des styles typographiques pour les blocs

B. Créer automatiquement une grille en deux dimensions

C. Positionner des éléments uniquement avec des flottants

D. Organiser des éléments dans un conteneur flexible en une seule dimension

Answer: (D)

Spiegazione

Flexbox est présenté comme un module de mise en page en une dimension qui organise des éléments dans un conteneur flexible. Il sert notamment à distribuer l’espace et à aligner les éléments plus facilement.

2. Dans quel type de mise en page Flexbox est-il particulièrement utile pour répartir des liens sur une ligne ?

A. Une animation de rotation

B. Un effet de survol des boutons

C. Une feuille de style d’impression

D. Une barre de navigation

Answer: (D)

Spiegazione

Les barres de navigation sont citées comme un usage typique de Flexbox, car les liens s’alignent et se répartissent facilement sur l’axe principal. Les autres propositions ne correspondent pas à un usage de mise en page.

3. Quelle relation décrit correctement un item flex dans une disposition Flexbox ?

A. C’est un enfant direct du conteneur flex

B. C’est la règle qui contrôle le retour à la ligne

C. C’est le parent qui reçoit display: flex

D. C’est l’axe perpendiculaire au conteneur

Answer: (A)

Spiegazione

Un item flex est défini comme un enfant direct du conteneur flex. Le parent est le conteneur, pas l’item.

4. Quel est le nom de l’axe perpendiculaire à l’axe principal ?

A. L’axe secondaire

B. L’axe principal

C. L’axe de base

D. L’axe de distribution

Answer: (A)

Spiegazione

L’axe secondaire est l’axe perpendiculaire à l’axe principal. Il sert notamment à l’alignement transversal.

5. Quelle valeur de flex-direction place les items horizontalement dans l’ordre normal ?

A. row

B. column-reverse

C. row-reverse

D. column

Answer: (A)

Spiegazione

La valeur par défaut indiquée est row, qui place les items horizontalement dans l’ordre normal. row-reverse conserve l’horizontalité mais inverse le sens.

6. Quelle valeur de flex-direction place les items verticalement du haut vers le bas ?

A. column

B. row

C. column-reverse

D. row-reverse

Answer: (A)

Spiegazione

column place les items verticalement du haut vers le bas. column-reverse inverse ce sens en allant du bas vers le haut.

7. Quelle valeur de flex-wrap force tous les items à rester sur une seule ligne ?

A. wrap

B. flex-flow

C. wrap-reverse

D. nowrap

Answer: (D)

Spiegazione

nowrap est la valeur indiquée pour empêcher le retour à la ligne. wrap, au contraire, autorise les éléments à passer à la ligne.

8. Quel raccourci combine flex-direction et flex-wrap dans une seule déclaration ?

A. align-content

B. flex-basis

C. flex-flow

D. justify-content

Answer: (C)

Spiegazione

flex-flow combine flex-direction et flex-wrap. Il permet donc de définir à la fois l’orientation et le comportement au débordement.

9. Quelle propriété répartit les items le long de l’axe principal ?

A. align-content

B. align-items

C. order

D. justify-content

Answer: (D)

Spiegazione

justify-content agit sur l’axe principal en distribuant et en positionnant les items. align-items concerne l’axe secondaire.

10. Quelle valeur de justify-content crée un espace entre les items tout en laissant les extrémités sans espace supplémentaire ?

A. flex-end

B. space-around

C. space-between

D. center

Answer: (C)

Spiegazione

space-between place un espace entre chaque item et ne rajoute pas d’espace aux extrémités. space-around répartit plutôt l’espace autour de chaque item.

11. Quelle propriété aligne tous les items d’un conteneur sur l’axe secondaire ?

A. align-self

B. align-content

C. align-items

D. justify-content

Answer: (C)

Spiegazione

align-items règle l’alignement des items sur l’axe secondaire pour l’ensemble du conteneur. align-self ne concerne qu’un seul item.

12. Quelle propriété permet de modifier l’alignement d’un item individuel par rapport à align-items ?

A. flex-wrap

B. align-content

C. justify-content

D. align-self

Answer: (D)

Spiegazione

align-self surcharge l’alignement défini par align-items pour un item précis. align-content s’applique au groupe de lignes, pas à un seul élément.

13. Quelle propriété définit la capacité d’un item à grandir pour occuper l’espace disponible ?

A. flex-shrink

B. flex-basis

C. flex-grow

D. flex-wrap

Answer: (C)

Spiegazione

flex-grow mesure la capacité d’un item à grandir selon l’espace disponible. flex-shrink concerne au contraire la rétraction.

14. Que représente flex-basis dans la répartition de l’espace Flexbox ?

A. La hauteur minimale du conteneur flex

B. L’ordre d’affichage de l’item dans le conteneur

C. La taille de base de l’item avant la distribution de l’espace

D. La capacité de l’item à rétrécir en cas de manque

Answer: (C)

Spiegazione

flex-basis fixe la taille de base avant la répartition de l’espace. Il ne définit ni l’ordre d’affichage ni la capacité de rétrécissement.

15. Quel effet produit une valeur order plus petite sur un item Flexbox ?

A. L’item apparaît plus tôt

B. L’item devient invisible

C. L’item occupe plus d’espace

D. L’item passe sur l’axe secondaire

Answer: (A)

Spiegazione

Une valeur order plus petite fait apparaître l’item plus tôt dans l’ordre visuel. L’exemple de cours montre notamment -1 avant 0 et 1.

16. Quelle affirmation décrit correctement l’impact de order sur la structure du document ?

A. Il réécrit l’ordre HTML des éléments

B. Il remplace flex-direction dans le conteneur

C. Il modifie l’ordre visuel sans changer l’ordre HTML

D. Il supprime l’alignement des items

Answer: (C)

Spiegazione

order change uniquement l’ordre d’affichage à l’écran, pas l’ordre HTML. C’est présenté comme important pour l’accessibilité.

17. Quel ensemble de propriétés correspond à une barre de navigation Flexbox typique ?

A. display: flex, align-items: center, justify-content: space-between

B. display: inline, align-content: center, flex-basis: auto

C. display: block, align-items: baseline, justify-content: center

D. display: grid, flex-wrap: wrap, order: 1

Answer: (A)

Spiegazione

L’exemple de barre de navigation utilise display: flex, align-items: center et justify-content: space-between. Cela permet d’aligner verticalement les éléments et de les répartir sur la ligne.

18. Quelle combinaison est utilisée pour un centrage parfait sur les deux axes dans l’exemple ?

A. align-self: center et order: 1

B. justify-content: space-between et align-content: center

C. flex-direction: column et flex-wrap: wrap

D. justify-content: center et align-items: center

Answer: (D)

Spiegazione

Le centrage parfait est obtenu avec justify-content: center et align-items: center. L’exemple mentionne aussi une hauteur de 100 vh pour occuper l’espace disponible.