Wie lassen sich Flexbox-Container horizontal erweitern, um verpackte Inhalte aufzunehmen?

Wie sich Flexbox-Container horizontal erweitern

Flexbox bietet eine differenzierte Kontrolle über das Layout und die Ausrichtung von Seitenelementen. Eine Herausforderung besteht darin, Flexbox-Behälter horizontal ausdehnen zu lassen, um verpackte Inhalte aufzunehmen. Browser weisen diesbezüglich unterschiedliche Verhaltensweisen auf, die spezielle Lösungen erforderlich machen.

Berücksichtigen Sie das gewünschte Bildraster:

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

Trotz Angabe des Spaltenumbruchs beschränkt Firefox die Breite des Containers auf die Elemente der ersten Spalte. während Chrome es unabhängig vom Inhalt auf die Breite des übergeordneten Elements erweitert. Um das Verhalten von IE11 zu erreichen, ist ein alternativer Ansatz erforderlich.

Schreibmodi ausnutzen

Browser unterstützen Schreibmodi im Allgemeinen gut. Schreibmodi ermöglichen das Vertauschen der Block- und Inline-Richtung und ermöglichen so den vertikalen Fluss von Flex-Elementen. Innerhalb der Flex-Elemente kann der horizontale Schreibmodus wiederhergestellt werden.

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

Indem Sie den Schreibmodus des Containers auf „vertikal-lr“ setzen und writing-mode: horizontal-tb auf die Flex-Elemente anwenden, können Sie dies effektiv erreichen vertikaler Fluss und horizontale Ausdehnung. Diese Lösung ist auf die Browserunterstützung für Schreibmodi abgestimmt und erfüllt die spezifischen Anforderungen für horizontal expandierende Flexbox-Container.

Das obige ist der detaillierte Inhalt vonWie lassen sich Flexbox-Container horizontal erweitern, um verpackte Inhalte aufzunehmen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!