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>

.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.

Das obige ist der detaillierte Inhalt vonBietet die Einstellung „Anzeige' bei Flexbox-Elementen echte Vorteile über das Standardverhalten hinaus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!