Wie lässt sich ein Flexbox-Container horizontal erweitern, um den Inhalt einzupacken?

Wie erweitere ich den Flexbox-Container horizontal zum Umschließen von Inhalten?

Beim Einsatz von CSS-Flexbox zeigen Browser ein unterschiedliches Verhalten, insbesondere im Zusammenhang mit der Größenänderung von Containern. Um diese Inkonsistenz zu beheben, suchen wir nach einer Lösung, um einen Flexbox-Container horizontal zu erweitern, um seinen verpackten Inhalt aufzunehmen.

In bestimmten Szenarien kann es erforderlich sein, dass ein Container mehrere div-Elemente umfasst, die in einem Spaltenlayout angeordnet sind. Das Ziel besteht darin, diesen Elementen einen vertikalen Fluss zu ermöglichen, wobei sie beim Erreichen des unteren Rands umbrochen werden, was zu Text- oder Bildspalten führt. Allerdings bleibt es eine Herausforderung, die horizontale Ausdehnung des Containers entsprechend den umhüllten Elementen zu steuern.

Um das gewünschte Verhalten zu erreichen, ist es möglich, einen Zeilen-Flex-Container mit einem vertikalen Schreibmodus zu nutzen. Dadurch werden die Inline- und Blockrichtungen umgekehrt, wodurch die Flex-Elemente vertikal fließen. Folglich wird der ausgerichtete Schreibmodus innerhalb der Flex-Elemente umgekehrt und die horizontale Ausrichtung wiederhergestellt.

Für eine praktische Demonstration betrachten Sie den folgenden Codeausschnitt:

.container {
  display: inline-flex;
  writing-mode: vertical-lr; /* Reverses inline and block directions */
  flex-wrap: wrap;
  align-content: flex-start;
  height: 350px;
  background: blue;
}

.photo {
  writing-mode: horizontal-tb; /* Restores horizontal alignment */
  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>

Durch diese Technik , der Container wird dynamisch horizontal erweitert, wenn neuer Inhalt hinzugefügt wird, wodurch die richtige Umhüllung und Ausrichtung der einzelnen Elemente gewährleistet wird.

Das obige ist der detaillierte Inhalt vonWie lässt sich ein Flexbox-Container horizontal erweitern, um den Inhalt einzupacken?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!