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.

Questions “vrai ou faux”

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.