Comment la propriété « display » affecte-t-elle la disposition des éléments Flexbox ?

Comprendre la propriété d'affichage dans les éléments Flexbox

Dans Flexbox, la propriété d'affichage contrôle la disposition des éléments enfants dans un conteneur flexible. Alors que les éléments flexibles sont par défaut display: block, la modification de cette propriété peut introduire des effets intéressants et des avantages fonctionnels. Deux options courantes sont display:block et display:inline-block.

Considérations clés :

La spécification CSS précise que la définition de l'affichage sur des valeurs de niveau en ligne telles que display:inline-block sera calculée pour valeurs au niveau du bloc (dans ce cas, block) lorsqu'elles sont utilisées en tant qu'enfant d'un conteneur flexible. Par conséquent, il n'y a pas de différence pratique entre display:block et display:inline-block dans les éléments flexbox.

Cependant, définir l'affichage sur table, table-en-ligne, grille-en-ligne, ou La grille peut avoir des effets importants. Dans ces cas, l'élément flex adoptera le comportement du type d'affichage spécifié.

Exemple :

Considérez le code suivant :

.box {
  display: flex;
  margin:5px;
}

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

span {
  border: 2px solid green;
}

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

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

<div class="box">
  <div>

Dans la première case, la propriété display:grid transforme l'élément flex en grille, avec deux colonnes et une ligne. Les travées à l'intérieur de la grille sont alignées en fonction de la disposition de la grille.

Dans la deuxième case, le paramètre display:inline-grid génère une grille en ligne, où les travées sont présentées horizontalement au lieu de verticalement.

En manipulant la propriété d'affichage, vous pouvez exploiter la puissance de Flexbox et d'autres types d'affichage pour créer des mises en page flexibles et complexes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!