Entfernen Sie Leerzeichen (Lücken) zwischen mehreren Linien von Flex-Elementen, wenn sie umgebrochen werden

9

Ich versuche, in einem Container mit einer festgelegten Höhe eine Anzahl von Elementen untereinander zu haben. Die Elemente werden dann nebeneinander fortgesetzt, wenn kein Platz mehr ist.

Das ist die Idee:

Ich versuche dies zu erreichen mit flexbox, einem Container mit einer eingestellten Höhe, Richtung wird auf column gesetzt und flex-wrap ist wrap :

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

Ich habe versucht, sowohl justify-content als auch align-items auf flex-start zu setzen, aber das ist wahrscheinlich der Standardwert.

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

Hier ist der Code:

%Vor% %Vor%

Codepen

    
j.grima 30.11.2016, 14:15
quelle

1 Antwort

20

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

Dies bedeutet, dass mehrere Linien von Flex-Elementen gleichmäßig entlang der Querachse verteilt werden.

Um dieses Verhalten zu überschreiben, wenden Sie align-content: flex-start auf den Container an.

Wenn Sie in einem einzeiligen flexiblen Container arbeiten (dh flex-wrap: nowrap ), sind die Eigenschaften, die zum Verteilen von Speicherplatz entlang der Querachse verwendet werden, align-items und align-self .

Wenn Sie in einem mehrzeiligen flexiblen Container arbeiten (dh flex-wrap: wrap ) - wie in der Frage - die Eigenschaft, die verwendet werden soll, um Flex-Linien (Zeilen / Spalten) entlang der Querachse ist align-content .

Aus der Spezifikation:

  

8.3. Achsenübergreifende Ausrichtung: Die Eigenschaften align-items und align-self

     

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. Flex-Linien verpacken: the align-content   Eigenschaft

     

Die Eigenschaft align-content richtet die Linien eines Flex-Containers innerhalb der   Flex Container, wenn mehr Platz in der Querachse ist, ähnlich wie bei   wie justify-content einzelne Elemente innerhalb der Hauptachse ausrichtet.    Beachten Sie, dass diese Eigenschaft keinen Einfluss auf einen einzeiligen Flex-Container hat.

Die Eigenschaft align-content benötigt sechs Werte:

  • flex-start
  • flex-end
  • center
  • space-between
  • space-around
  • stretch

Hier ist die Definition für stretch :

  

stretch

     

Linien dehnen sich, um den verbleibenden Platz zu belegen. Wenn der verbleibende freie Speicherplatz negativ ist, ist dieser Wert identisch mit flex-start . Andernfalls wird der Freiraum gleichmäßig auf alle Zeilen aufgeteilt, wodurch ihre Quergröße vergrößert wird.

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

    
Michael_B 30.11.2016, 14:19
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Wie erkennt man den ersten Start in react-native?