Flexbox Quiz

Dans la même veine que le « Quiz CSS » posté il y a maintenant quelques années par Thierry Koblentz, je vous propose un Quiz Flexbox.

La question est : parmi l’ensemble des déclarations suivantes, lesquelles n’ont pas d’effet ?
(dans le sens « lesquelles ne s’appliquent pas ou bien reproduisent inutilement la valeur par défaut »).

Notes :

• la page ne contient que ces styles et rien d’autre, et les éléments ciblés existent dans le DOM (edit: et ne sont pas des tableaux).
• le code doit pouvoir fonctionner avec un ou plusieurs flex-items.
• si une propriété s’applique, si elle impacte le comportement, il faut la conserver.
• le code est à tester sur un navigateur moderne ne présentant pas de bug majeur sur Flexbox (donc pas IE10 et IE11)
• ne cherchez pas trop sur Google et ne testez pas tout de suite le code sur une vraie page, sinon il n’y a plus de plaisir 😉

.flex-container {
  display: flex;
  flex-flow: column nowrap;
  align-items: space-between;
  flex-direction: row;
}

.flex-item {
  flex: 1;  
  display: block;
  align-content: center;
  flex-shrink: 1;
  float: left;
  clear: both;
  z-index: -1;
  bottom: 1em;
  vertical-align: top;
  width: 250px;
  height: 250px;
}

Laissez-moi vos réponses par commentaires.

Je donne le corrigé explicatif très prochainement.

---

Correction et explications.

Voici donc le verdict. Je préviens qu’il y avait forcément pas mal de pièges et que j’avoue que l’énoncé n’était pas toujours très clair. L’essentiel demeurait de participer et de découvrir des choses méconnues.

La réponse la plus proche, munie des explications les plus complètes vient de Loïc Giraudel, bravo à lui !

Sur le .flex-container :

• display: flex; (à conserver)
  c’est le postuat de départ sans lequel rien ne s’affiche correctement. On garde forcément.
• flex-flow: column nowrap; (inutile)
  column sera écrasé plus bas par flex-direction et nowrap est la valeur par défaut.
• align-items: space-between (inutile)
  ne s’appliquera jamais… puisque space-between n’est pas une valeur autorisée pour align-items (très peu y ont prêté attention).
• flex-direction: row; (inutile)
  row est la valeur par défaut, bref on retourne à l’état initial d’un flex-container.

Sur le .flex-item :

• flex: 1; (à conserver)
  permet au flex-item d’être fluide, correspond à flex: 1 1 0; (la valeur par défaut étant flex: initial;, soit flex: 0 1 auto;)
• display: block; (inutile)
  presque aucune valeur de display n’est prise en compte sur un flex-item (sauf none et flex, et sauf bugs sur IE10-IE11).
• align-content: center; (inutile)
  cette propriété ne s’applique que sur un flex-container.
• flex-shrink: 1; (inutile)
  il s’agit de la valeur par défaut de flex-shrink et elle n’entre pas en contradiction avec la déclaration précédente flex: 1;, elle est donc inutile.
• float: left; (inutile)
  la propriété float ne s’applique pas à un flex-item.
• clear: both; (inutile)
  la propriété clear ne s’applique pas à un flex-item.
• z-index: -1; (à conserver !)
  c’est assez inattendu, mais un flex-item crée un « stacking context » et la propriété z-index s’y applique. Il est donc nécessaire de conserver cette déclaration car elle peut modifier le comportement de l’élément et de son environnement (dans le code initial, j’avais z-index:0; mais l’argument reste le même).
• bottom: 1em; (inutile)
  la propriété bottom ne s’applique qu’aux éléments positionnés, or un flex-item ne l’est pas par défaut, elle est donc ignorée ici.
• vertical-align: top; (inutile)
  la propriété vertical-align ne s’applique pas à un flex-item.
• width (inutile)
  est écrasé par flex-basis: 0, prioritaire, et contenu dans la déclaration flex: 1 (qui pour rappel vaut flex: 1 1 0;)
• height n’est pas écrasé par flex-basis: 0 car ce dernier n’agit que sur l’axe principal (row ici), donc cette propriété s’applique.

Au final, voici ce qu’on conserve :

.flex-container {
 display: flex;
 }

.flex-item {
 flex: 1;
 z-index: -1;
 height: 250px;
 }

Merci à tous ceux qui ont joué, encore désolé si l’énoncé n’était pas toujours très clair (entre les propriétés qui ne s’appliquent pas, celles qui ne servent à rien), et j’espère que vous y avez appris des trucs !