Wie man die letzte Zeile in einem Flex-Container mit align-items nicht überstreckt: stretch

Question

Ich habe einen Flex-Container mit flex-wrap: wrap und align-items: stretch, so dass Kinder gestreckt werden, wenn der Container bis zum nächsten Kind passt.

Das Problem ist normalerweise die letzte Zeile hat weniger Elemente als vorherige Zeilen und Kinder werden zu sehr gestreckt (alle Felder sollten in jeder Situation gleich aussehen). Wie kann ich das verhindern, abgesehen davon, dass am Ende des Containers mehrere leere Boxen erstellt werden?

Der vollständige Code ist hier: http://jsfiddle.net/m_gol/B3wLG/2/

Es ist im Grunde:

body { 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-wrap: wrap; 
    flex-wrap: wrap; 
    -webkit-align-items: stretch; 
    align-items: stretch; 
} 
.child { 
    height: 50px; 
    margin: 10px; 
    -webkit-flex: 1 1 50px; 
    flex: 1 1 50px; 
    background-color: red; 
    border: 1px solid black; 
} 

wo bodychild ein Bündel von Elementen mit einer Klasse enthält.

Answer 1

Ich denke, Sie müssten uns JS überprüfen, um zu überprüfen, ob die Breite der letzten Anzahl N untergeordneten Elemente mit der Breite des ersten Elements übereinstimmen. Für jedes Element, das nicht übereinstimmt, unflex es (flex: none), dann stellen Sie die Breite so ein, dass sie der Breite des ersten Elements entspricht.

Ich habe ein kleines Skript dafür zusammengestellt. Leider müssen Sie die Klasse smoothFlex dem Eltern hinzufügen, damit es funktioniert; oder Sie können einen anderen Selektor verwenden.

Ich kenne keine schnelle Möglichkeit, alle Elemente mit einem Stil display: flex auszuwählen.

Ansonsten funktioniert das folgende Skript genau so, wie ich es erwarte.

IMO, der Flexbox-Standard sollte eine native Option dafür haben - sollte standardmäßig sein, wenn der Elternteil umgebrochen ist.

Quellen:

• JQuery .each() backwards
• http://www.w3schools.com/jquery/sel_gt.asp
• How to break/exit from a each() function in JQuery?

Answer 2

Die einzige Lösung, die ich auf diese bisher gefunden habe ist programmatisch ein paar leere Kind-Elemente hinzufügen zu bilden komplette Reihe - es ist in Ordnung, mehr als die Reihe hinzuzufügen, so dass sie überlaufen (wie sie leer sind).

Answer 3

Die Toten einfachste Weg ist es, die flex vom letzten Element zu entfernen:

.flex-item:last-child{ 
    flex-grow: 0; 
} 

Oder es einen kleinen Bruchteil des Wachstums geben, so dass es nicht aussehen zu wenig entweder (vor allem, wenn alles andere gewachsen ist ein wenig)

.flex-item:last-child{ 
    flex-grow: 0.1; 
} 

Wenn keine dieser Arbeit, ein leeres div als letzte Element hinzufügen, und es ein viel größeres Wachstum geben - auch ausblenden, alle Grenzen und Hintergründe, und es hat eine Höhe von Null geben, damit es doesn‘ t nehmen Sie eine andere Linie

.flex-item:last-child{ 
    background: none; 
    border: none; 
    height: 0px; 
    flex-grow: 100; 
}