Wie lässt sich ein Flexbox-Container mit umschlossenen Inhalten in verschiedenen Browsern horizontal erweitern?

Flexbox-Container horizontal mit verpacktem Inhalt erweitern

Flexbox bietet eine leistungsstarke Lösung zum Erstellen flexibler Layouts. Es kann jedoch zu Abweichungen im Browserverhalten kommen, die zu unerwarteten Ergebnissen führen. Ein solches Problem tritt auf, wenn versucht wird, einen Flexbox-Container mit seinem umschlossenen Inhalt horizontal zu erweitern.

Beachten Sie den folgenden HTML- und CSS-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>

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

Dieser Code zielt darauf ab, einen zu erstellen Raster aus Bildern, die von oben nach unten verlaufen und sich umhüllen, wenn sie unten ankommen. Das Browserverhalten variiert jedoch:

• IE 11: Container wird erweitert, um umschlossene Elemente erfolgreich aufzunehmen.
• Firefox: Umschließt nur das erste Spalte mit Elementen, wobei andere überlaufen.
• Chrome:Container füllt immer die Breite seines übergeordneten Elements aus.

Um das gewünschte Verhalten in anderen Browsern zu erreichen, berücksichtigen Sie Verwendung eines Zeilen-Flex-Containers mit vertikalem Schreibmodus.

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

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

Durch den Austausch der Blockrichtung mit der Inline-Richtung fließen die Flex-Elemente vertikal. Die Wiederherstellung des horizontalen Schreibmodus innerhalb der Flex-Elemente vervollständigt die Lösung. Diese Technik ermöglicht die Erstellung von Flexbox-Containern, die horizontal erweitert werden, um den Inhalt ihrer Spaltenumbrüche in allen Browsern konsistent anzupassen.

Das obige ist der detaillierte Inhalt vonWie lässt sich ein Flexbox-Container mit umschlossenen Inhalten in verschiedenen Browsern horizontal erweitern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!