wayground logo

Free Printable Worksheets

NEW

Font size

S
M
L
XL
Worksheets

Quiz sur Flexbox en CSS

Total questions: 11

Worksheet time: 6mins

Name
Class
Date
1.

Pourquoi utilise-t-on principalement Flexbox en CSS ?

a)

Pour aligner et distribuer des éléments dans un conteneur de manière flexible

b)

Pour gérer les animations complexes

c)

Pour remplacer complètement HTML

d)

Pour optimiser le référencement (SEO)

2.

Sur quel élément applique-t-on display: flex pour utiliser Flexbox ?

a)

Sur chaque enfant que l’on veut aligner

b)

Sur le conteneur parent qui englobe les éléments à aligner

c)

Sur le body uniquement

d)

Sur toutes les balises de la page

3.

Quel sera le comportement des éléments enfants directs de .container ?

a)

Ils restent empilés verticalement comme avant

b)

Ils sont alignés en colonne par défaut

c)

Ils sont alignés sur une ligne, les uns à côté des autres

d)

Ils disparaissent de la page

4.

À quoi sert la propriété justify-content dans un conteneur Flex ?

a)

À gérer l’alignement vertical des éléments

b)

À gérer la couleur de fond du conteneur

c)

À gérer la répartition des éléments sur l’axe principal (horizontal par défaut)

d)

À changer l’ordre du HTML

5.

Que fait align-items: center; ?

a)

Centre le texte à l’intérieur de chaque enfant

b)

Centre les éléments sur l’axe secondaire (vertical par défaut)

c)

Centre le conteneur dans la page

d)

Centre le body par rapport à l’écran

6.

Quel est le principal effet de gap: 30px; ici ?

a)

Il ajoute une marge autour de toute la section

b)

Il centre la section dans la page

c)

Il réduit la taille de l’image de 30px

d)

Il ajoute un espace de 30px entre l’image et le bloc de texte

7.

Que permet flex: 1; sur .bloc ?

a)

Chaque bloc prend exactement 1 pixel de large

b)

Chaque bloc prend la largeur minimale possible

c)

Tous les blocs partagent l’espace disponible de manière égale

d)

Le premier bloc devient plus grand que les autres

8.

À quoi sert flex-wrap: wrap; sur un conteneur Flex ?

a)

À forcer tous les éléments sur une seule ligne

b)

À permettre aux éléments de passer à la ligne suivante si l’espace horizontal est insuffisant

c)

À ajouter automatiquement des marges autour des éléments

d)

À rendre le texte responsive dans les blocs

9.

Dans un conteneur display: flex; avec la direction par défaut (ligne), quelles affirmations sont vraies ?

a)

justify-content agit sur l’axe horizontal, align-items sur l’axe vertical

b)

justify-content agit sur l’axe vertical, align-items sur l’axe horizontal

c)

Les deux agissent uniquement sur l’axe horizontal

d)

Les deux agissent uniquement sur l’axe vertical

10.

Laquelle de ces pratiques est recommandée avec Flexbox dans le cadre du portfolio ?

a)

Utiliser seulement des margin-right pour espacer les blocs

b)

Utiliser gap pour l’espace entre éléments plutôt que des marges manuelles

c)

Éviter display: flex dans les sections principales

d)

Ne jamais utiliser Flexbox pour des listes de blocs

11.

Comment dit-on "espace" en anglais ?

a)

espulse

b)

Expoce

c)

espace

d)

hesspace

e)

S P A S