Wie erreicht man ein konsistentes horizontal expandierendes Flexbox-Containerverhalten über alle Browser hinweg?

Horizontal expandierender Flexbox-Container

Problem

In Flexbox variiert das Verhalten eines Containers mit umschlossenen Inhalten je nach Browser. IE 11 zeigt das gewünschte Verhalten, indem der Container horizontal gestreckt wird, um Elemente einzuschließen, während Firefox und Chrome Inkonsistenzen aufweisen.

Lösung

Obwohl Browser keine vollständige Implementierung von Column-Flex-Containern haben, unterstützen sie Schreibmodi gut. Durch die Verwendung eines Zeilen-Flex-Containers mit vertikalem Schreibmodus wird die Inline-Richtung des Containers mit der Blockrichtung vertauscht. Flex-Elemente fließen vertikal und der horizontale Schreibmodus kann innerhalb der Flex-Elemente wiederhergestellt werden.

Beispielcode

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

<div class="container">
  <div class="photo">1</div>
  <div class="photo">2</div>
  <div class="photo">3</div>
  <div class="photo">4</div>
  <div class="photo">5</div>
  <div class="photo">6</div>
  <div class="photo">7</div>
  <div class="photo">8</div>
  <div class="photo">9</div>
</div>

Dieser Ansatz ahmt das Verhalten von IE 11 nach, indem sichergestellt wird, dass der Container horizontal gestreckt wird um die verpackten Inhalte in Firefox und Chrome unterzubringen.

Das obige ist der detaillierte Inhalt vonWie erreicht man ein konsistentes horizontal expandierendes Flexbox-Containerverhalten über alle Browser hinweg?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!