| layout | title | permalink |
|---|---|---|
page |
Quiz |
quiz.html |
Questions d'auto-évaluation sur Flexbox.
Vous trouvez ces questions aussi dans un Kahoot.
1. Comment initaliser Flexbox ?
- display : flexbox
- display : flex
- flexbox : 1
- position : flex
Voir la réponse
display : flex permet d'initialiser Flexbox.
2. Cochez toutes les valeurs que "justify-content" peut prendre.
- space-evenly
- space-inside
- space-between
- space-around
Voir la réponse
Les trois valeurs d'espacement possibles sont:
space-between, space-around, space-evenly. Voir propriétés.
La valeur space-inside n'existe pas.
3. Que se passe-t-il si on applique "flex:1" sur les éléments enfants d’une Flexbox?
- Ils sont de largeur égale.
- Leur taille devient minuscule.
- Ils occupent toute la largeur disponible.
- Ils recouvrent les autres éléments de la page.
Voir la réponse
1 et 3 sont justes.
Leur largeur sera égale, et remplira l'espace disponible. Voir méthode simple.
4. Comment appliquer flex:1 sur les enfants directs de .row ?
-
.row { flex : 1 } -
.row * { flex : 1 } -
.row * > { flex : 1 } -
.row > * { flex : 1 }
Voir la réponse
La réponse 4 est juste. Voir méthode simple / sélecteurs CSS.
La mise en page Flexbox s'applique sur les éléments enfants du conteneur.
- Vrai.
- Faux.
Voir la réponse
Vrai. C'est un principe fondamental de Flexbox (et aussi Grid CSS).
Il est déconseillé d'utiliser Flexbox plusieurs fois sur une même page web.
- Vrai.
- Faux.
Voir la réponse
Faux. Il n'y a aucun problème à l'utiliser plusieurs fois sur une page.
Il est obligatoire de déclarer display:flex sur l'élément conteneur.
- Vrai.
- Faux.
Voir la réponse
Vrai. C'est nécessaire pour utiliser Flexbox.
L'ordre d'affichage des éléments Flex peut être modifié en CSS avec order.
- Vrai.
- Faux.
Voir la réponse
Vrai. Voir les propriétés.