Bietet die Einstellung „Anzeige' bei Flexbox-Elementen echte Vorteile über das Standardverhalten hinaus?

Untersuchung der Bedeutung der Anzeigeeigenschaft in Flex-Box-Elementen

Frage:

Kann die Anzeigeeigenschaft einzelner Flex-Elemente angepasst werden Bieten die Box-Artikel bestimmte Vorteile oder Ergebnisse? Welche Auswirkungen hat es konkret, wenn die Anzeige auf „Block“ oder „Inline-Block“ eingestellt wird?

Antwort:

Die CSS-Spezifikation stellt klar, dass Flex-Elementen Anzeigewerte auf Inline-Ebene zugewiesen werden werden in ihre Gegenstücke auf Blockebene umgewandelt. Daher führt die explizite Einstellung von display auf „block“ oder „inline-block“ zu keinen erkennbaren Änderungen, da beide in „block“ aufgelöst werden.

Es können jedoch erhebliche Auswirkungen auftreten, wenn die display-Eigenschaft auf „table“, „inline-table“ oder „inline-grid“ festgelegt ist , oder Gitter. In diesen Fällen übernimmt das Flex-Element die Eigenschaften des angegebenen Anzeigetyps und ändert seine Darstellung und sein Verhalten.

Betrachten Sie das folgende HTML- und CSS-Beispiel:

<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;
}

In Im ersten Feld wird die Anzeigeeigenschaft für die verschachtelten Divs nicht explizit festgelegt. Als Ergebnis wird die standardmäßige blockierte Anzeige angewendet. Im zweiten Feld hingegen ist die Anzeige auf „inline-grid“ eingestellt, wodurch sich die inneren Divs wie ein Rasterelement verhalten. Dies erkennt man an den grünen Rändern um die Spannweiten, die sich entsprechend ausrichten.