La définition de « affichage » sur les éléments Flexbox offre-t-elle de réels avantages au-delà du comportement par défaut ?

Explorer l'importance de la propriété d'affichage dans les éléments de la boîte flexible

Question :

Peut ajuster la propriété d'affichage de chaque flex Les éléments de la boîte offrent-ils des avantages ou des résultats distincts ? Plus précisément, quelles sont les implications de la définition de l'affichage sur block ou inline-block ?

Réponse :

La spécification CSS précise que les valeurs d'affichage au niveau en ligne attribuées aux éléments flexibles seront convertis en leurs homologues au niveau du bloc. Par conséquent, définir explicitement display sur block ou inline-block ne produira pas de changements perceptibles puisque les deux se résolvent en block.

Cependant, des effets significatifs peuvent survenir lorsque la propriété display est définie sur table, inline-table, inline-grid. , ou une grille. Dans ces cas, l'élément flexible adoptera les caractéristiques du type d'affichage spécifié, modifiant ainsi sa présentation et son comportement.

Considérez l'exemple HTML et CSS suivant :

<div class="box">
  <div>
    <span></span>

    <span></span>
  </div>
</div>

<div class="box">
  <div>
<pre class="brush:php;toolbar:false">.box {
  display: flex;
  margin: 5px;
}

.box > div {
  height: 50px;
  width: 100%;
  background: red;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 1fr;
  grid-gap: 20px;
}

span {
  border: 2px solid green;
}

Dans Dans la première case, la propriété d'affichage des divs imbriqués n'est pas explicitement définie. En conséquence, l’affichage bloqué par défaut sera appliqué. En revanche, dans la deuxième zone, l'affichage est défini sur une grille en ligne, ce qui fait que les divs internes se comportent comme un élément de grille. Cela ressort clairement des bordures vertes autour des travées, qui s'alignent en conséquence.