Wie wirkt sich die Eigenschaft „display' auf das Layout von Flexbox-Elementen aus?

Grundlegendes zur Display-Eigenschaft in Flexbox-Elementen

In Flexbox steuert die Display-Eigenschaft das Layout untergeordneter Elemente innerhalb eines Flex-Containers. Während Flex-Elemente standardmäßig display: block verwenden, kann die Änderung dieser Eigenschaft interessante Effekte und funktionale Vorteile mit sich bringen. Zwei gängige Optionen sind display:block und display:inline-block.

Wichtige Überlegungen:

Die CSS-Spezifikation stellt klar, dass die Einstellung der Anzeige auf Werte auf Inline-Ebene wie display:inline-block auf Blockebene berechnet wird Werte (in diesem Fall block), wenn sie als untergeordnetes Element eines Flex-Containers verwendet werden. Daher gibt es keinen praktischen Unterschied zwischen display:block und display:inline-block in Flexbox-Elementen.

Allerdings wird die Anzeige auf Tabelle, inline-table, inline-grid, oder Raster kann erhebliche Auswirkungen haben. In diesen Fällen übernimmt das Flex-Element das Verhalten des angegebenen Anzeigetyps.

Beispiel:

Bedenken Sie den folgenden Code:

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

Im ersten Feld wandelt die Eigenschaft

display:grid das Flex-Element in ein Raster mit zwei Spalten um eine Reihe. Die Spannweiten innerhalb des Rasters werden entsprechend dem Rasterlayout ausgerichtet.

Im zweiten Feld führt die Einstellung

display:inline-grid zu einem Inline-Raster, in dem die Spannweiten nicht horizontal dargestellt werden vertikal.

Durch Bearbeiten der Anzeigeeigenschaft können Sie die Leistungsfähigkeit von Flexbox und anderen Anzeigetypen nutzen, um flexible und komplexe Layouts zu erstellen.

Das obige ist der detaillierte Inhalt vonWie wirkt sich die Eigenschaft „display' auf das Layout von Flexbox-Elementen aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!