Flex-Objekte gleichmäßig verteilen, wenn sie umgebrochen werden

Wenn mein Flexbox-Container mehr als eine bestimmte Anzahl von Elementen hat, möchte ich, dass mehrere Elemente verwendet werden. Hier ist meine aktuelle Lösung:Flex-Objekte gleichmäßig verteilen, wenn sie umgebrochen werden

.container { 
 
    display: flex; 
 
    width: 400px; 
 
    background: black; 
 
    padding: 6px; 
 
    margin: 10px; 
 
    flex-wrap: wrap; 
 
} 
 
.box { 
 
    flex: 1 1 0; 
 
    height: 32px; 
 
    flex-grow: 1; 
 
    min-width: 15%; 
 
    border: solid 1px black; 
 
} 
 
.box:nth-child(even) { 
 
    background: blue; 
 
} 
 
.box:nth-child(odd) { 
 
    background: red; 
 
}

<div class="container"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
</div> 
 

 
<div class="container"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
</div> 
 

 
<div class="container"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
</div>

http://codepen.io/samkeddy/pen/mOwZBv?editors=1100

Das Problem ist, die Elemente in der letzten Zeile gedehnt die Zeile zu füllen.

Was ich will, ist für sie die Elemente gleichmäßig zwischen den Zeilen zu verteilen, so dass jedes Element so nah an der gleichen Größe wie möglich ist.

Zum Beispiel gibt es ein Maximum von 6 Elementen pro Reihe. Wenn Sie 8 Elemente haben, wird 6 in die erste Zeile und 2 auf die zweite gesetzt. Ich möchte, dass es 4 auf jede Reihe setzt.

Ist dies mit der flexbox möglich? Ist das in irgendeiner Weise möglich?

Quelle

2016-11-25 stackers

Mögliche Duplikat (http://stackoverflow.com/questions/22085646/can-flexbox-divide-items-evenly -on-multiple-rows) – Roberrrt

Ja, hört sich an, als ob diese Person nach dem gleichen Ding sucht. – stackers

Ihre Frage wirft zwei Probleme auf: (1) Halten Sie die Objekte beim Umwickeln gleich groß, und (2) verteilen Sie die Objekte beim Umwickeln gleichmäßig. Problem (2) kann gelöst werden, indem "flex-wrap" in eine Medienabfrage verschoben wird. Problem (1) kann mit unsichtbaren nachfolgenden Elementen gelöst werden: [** demo **] (http://codepen.io/anon/pen/eBRwae?editors=1100). –

Was ich schließlich tun musste, war die Anzahl der Boxen pro Zeile (Server-Seite) zu berechnen und dann verwenden, um die minimale Breite für jede Box zu erhalten, und es auf jede mit Inline-CSS angewendet.

Quelle

2017-06-29 13:00:59 stackers

Es gibt tatsächlich einen Trick, um dies zu tun: Fügen Sie ein Pseudo-Element zum Behälter, und geben Sie ihm eine flex-grow von 50 oder so. Dadurch wird ein vorgetäuschtes Element erstellt, das den Rest des Raums ausfüllt. Beachten Sie, dass ich die border-Regel entfernt habe, da sie auf die Breite des Elements angerechnet wird und mit der Flex-Basis in Konflikt steht. Hier

ist das modifizierte Beispiel: [? Kann divide Elemente gleichmäßig auf mehrere Zeilen Flexbox] https://codepen.io/walidvb/pen/ZXvLYE

Quelle

2017-10-05 11:53:08 walidvb

Flex-Objekte gleichmäßig verteilen, wenn sie umgebrochen werden

Antwort

Verwandte Themen