Wie erreicht man eine konsistente horizontale Erweiterung für umschlossene Flex-Elemente in allen Browsern?

Horizontal erweiterbarer Flex-Container für verpackte Inhalte

Bei der Verwendung von CSS Flexbox zeigen Browser möglicherweise unterschiedliche Verhaltensweisen für bestimmte Eigenschaften. Insbesondere das Erstellen eines Rasters aus in Spalten angeordneten Bildern und deren Umbruch kann eine Herausforderung darstellen, wenn es darum geht, ein konsistentes Verhalten in allen Browsern zu erreichen.

Beachten Sie den folgenden HTML-Code:

<div class="container">
    <div class="photo"></div>
    <div class="photo"></div>
    <div class="photo"></div>
    <div class="photo"></div>
    <div class="photo"></div>
    <div class="photo"></div>
</div>

Und das Begleitmaterial CSS:

.container {
    display: inline-flex;
    flex-flow: column wrap;
    align-content: flex-start;
    height: 100%;
}

Das Ziel besteht darin, dass sich der Container horizontal ausdehnt, um die umschlossenen Elemente aufzunehmen und ein gitterartiges Layout mit Bildspalten bereitzustellen. Wie Sie jedoch möglicherweise in einer bereitgestellten jsFiddle feststellen, unterscheidet sich das Browserverhalten:

• IE 11: Der Container wird horizontal erweitert und umschließt jede Spalte mit Elementen.
• Firefox:Nur ​​die erste Spalte der Elemente wird umbrochen, der Rest läuft über.
• Chrome:Der Container wird immer so weit gedehnt, dass er die Breite seines übergeordneten Elements ausfüllt.

Um diese Inkonsistenz zu beheben und das in IE 11 beobachtete Verhalten zu erreichen, implementieren Sie die folgende Lösung:

.container {
  display: inline-flex;
  writing-mode: vertical-lr;
  flex-wrap: wrap;
  align-content: flex-start;
  height: 350px;
  background: blue;
}

.photo {
  writing-mode: horizontal-tb;
  width: 150px;
  height: 100px;
  background: red;
  margin: 2px;
}

Dieser Ansatz verwendet einen Zeilen-Flex-Container mit einem vertikalen Schreibmodus. Durch Vertauschen der Block- und Inline-Richtung werden die Flex-Elemente gezwungen, vertikal zu fließen. Die Schreibmodi innerhalb der einzelnen Flex-Items werden dann auf horizontal zurückgesetzt. Dadurch wird der Container horizontal erweitert, um dem verpackten Inhalt zu entsprechen, und ahmt das in IE 11 beobachtete Verhalten nach.

Das obige ist der detaillierte Inhalt vonWie erreicht man eine konsistente horizontale Erweiterung für umschlossene Flex-Elemente in allen Browsern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!