Wie richtet man die letzte Zeile in einem Flexbox-Layout linksbündig aus?

Letzte Zeile links in Flexbox ausrichten

Flexbox ist ein leistungsstarkes Layout-Tool, das eine vielseitige Inhaltsanordnung ermöglicht. Bei Flexboxen mit mehreren Leitungen kann die Aufrechterhaltung der Ausrichtung jedoch eine Herausforderung darstellen. Dieser Artikel befasst sich mit dem Problem der Linksausrichtung der letzten Zeile/Zeile in Flexbox, um ein konsistentes gitterartiges Layout sicherzustellen.

Das Problem tritt auf, wenn die letzte Zeile nicht die gleiche Anzahl an Elementen enthält wie andere Zeilen. Dies führt zu einer Zentrierung und Unterbrechung des Gittereffekts. Um dieses Problem anzugehen, wird eine Lösung vorgeschlagen, die strategisch platzierte leere raumfüllende Elemente verwendet.

Erstellen Sie im HTML drei leere Divs mit der Klasse „filling-empty-space-childs“. Diese Elemente sollten eine Breite haben, die der Breite der untergeordneten Elemente entspricht, und eine Höhe von 0. Diese Elemente spielen eine entscheidende Rolle bei der Ausrichtung der letzten Zeile nach links.

Der Flexbox-Container sollte die folgenden Eigenschaften haben:

• Anzeige: Flex
• Flex-Wrap: Wrap
• Justify-Content: Space-around

Abhängig von der Anzahl der Elemente in der letzten Zeile, die leeren raumfüllenden Elemente werden in einer neuen Zeile zusammengelegt, bleiben unsichtbar und stellen sicher, dass die letzte Zeile linksbündig bleibt.

Hier ist ein Beispiel:

<code class="html"><div class="container">
  <div class="item"></div>
  <div class="item"></div>
  ...
  <div class="item"></div>
  <div class="filling-empty-space-childs"></div>
  <div class="filling-empty-space-childs"></div>
  <div class="filling-empty-space-childs"></div>
</div></code>

<code class="css">.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}

.item {
  width: 130px;
  height: 180px;
  background: red;
  margin: 0 1% 24px;
}

.filling-empty-space-childs {
  width: 130px;
  height: 0;
}</code>

Durch die Implementierung dieser Technik wird die letzte Zeile/Zeile linksbündig ausgerichtet, wodurch der gewünschte Rastereffekt erhalten bleibt, auch wenn sie eine andere Anzahl von Elementen enthält als andere Zeilen.

Das obige ist der detaillierte Inhalt vonWie richtet man die letzte Zeile in einem Flexbox-Layout linksbündig aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!