Entfernen Sie den Abstand (Lücken) zwischen mehreren Zeilen von Flex-Elementen, wenn sie umbrochen werden

Question 1

Ich versuche, mehrere Gegenstände in einem Behälter mit einer festgelegten Höhe untereinander zu haben. Die Artikel werden dann nebeneinander weitergeführt, wenn kein Platz mehr vorhanden ist.

Das ist die Idee:

Ich versuche dies mit Flexbox zu erreichen, einem Container mit einer festgelegten Höhe und Richtung column und flex-wrap ist wrap:

Das Problem ist, dass es große Lücken zwischen den Spalten gibt.

Ich habe versucht, beide einzustellen justify-content und align-items zu flex-startaber das ist wahrscheinlich der Standardwert.

Gibt es eine Möglichkeit, dies zu lösen?

Hier ist der Code:

* {
  box-sizing: border-box;
}
body {
  font-family: sans-serif;
}
.container {
  display: flex;
  flex-wrap: wrap;
  height: 300px;
  flex-direction: column;
  background-color: #ccc;
}
.items {
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: tomato;
  color: white;
  font-size: 60px;
  font-weight: bold;
  text-align: center;
  padding: 15px;
}

<div class="container">
  <div class="items">1</div>
  <div class="items">2</div>
  <div class="items">3</div>
  <div class="items">4</div>
  <div class="items">5</div>
</div>

Codestift

Question 2

Eine anfängliche Einstellung eines Flex-Containers ist align-content: stretch.

Das bedeutet, dass mehrere Zeilen flexibler Elemente gleichmäßig entlang der Querachse verteilt werden.

Wenden Sie an, um dieses Verhalten zu überschreiben align-content: flex-start zum Behälter.

Wenn Sie in einem arbeiten Einzeiliger Flex-Container (dh, flex-wrap: nowrap), sind die zu verwendenden Eigenschaften, um den Raum entlang der Querachse zu verteilen align-items und align-self.

Wenn Sie in einem arbeiten Mehrzeiliger Flex-Container (dh, flex-wrap: wrap) – wie in der Frage – die Eigenschaft, die zum Verteilen verwendet werden soll Flexleitungen (Zeilen / Spalten) entlang der Querachse ist align-content.

Aus der Spezifikation:

8.3. Achsübergreifende Ausrichtung: die align-items und align-self Eigenschaften

align-items legt die Standardausrichtung für alle Elemente des Flex-Containers fest, einschließlich anonymer Flex-Elemente. align-self ermöglicht das Überschreiben dieser Standardausrichtung für einzelne Flex-Elemente.

8.4. Verpackungsflexleitungen: die align-content
Eigentum

Die align-content -Eigenschaft richtet die Linien eines Flex-Containers innerhalb des Flex-Containers aus, wenn in der Querachse zusätzlicher Platz vorhanden ist, ähnlich wie wie justify-content richtet einzelne Elemente innerhalb der Hauptachse aus.
Beachten Sie, dass diese Eigenschaft keine Auswirkung auf einen einzeiligen Flex-Container hat.

Die align-content Eigenschaft nimmt sechs Werte an:

flex-start

flex-end
center
space-between

space-around
stretch

Hier ist die Definition für stretch:

stretch

Linien dehnen sich aus, um den verbleibenden Platz einzunehmen. Wenn der verbleibende freie Speicherplatz negativ ist, ist dieser Wert identisch mit flex-start. Andernfalls wird der Freiraum gleichmäßig auf alle Linien aufgeteilt, wodurch ihre Kreuzgröße erhöht wird.

Mit anderen Worten, align-content: stretch auf der Querachse ist ähnlich flex: 1 auf der Hauptachse.