Flexbox: Wie kann man Divs dazu bringen, 100% der Containerbreite zu füllen, ohne sie zu verpacken?

78

Ich bin dabei, ein altes inline-blockGittermodell, das ich habe, auf ein neueres Flexbox-Modell zu aktualisieren, das ich erstellt habe. Alles hat gut funktioniert, bis auf einen kleinen Haken, der ein bisschen zum Dealbreaker geworden ist:

Ich habe eine Reihe von CSS-gesteuerten Schiebereglern. Es gibt also einen Wrapper mit 100% Breite, und im Inneren befindet sich ein weiteres Div: Seine Breite beträgt ebenfalls 100%, aber es white-spaceist auf eingestellt nowrap. Mit inline-blockbedeutet dies , dass die interne divs (die wurden auch auf 100% Breite eingestellt) nicht von ihren Eltern Zwänge und wickelt auf die nächsten Zeile gebunden werden - sie würden tragen nur von der Box auf ausströmt. Genau das wollte ich. Mit der Flexbox kann ich das jedoch überhaupt nicht zum Laufen bringen. Als Referenz hier ein Bild:

Flexbox-Problem

Und als Referenz hier eine jsFiddle der Sache, die mit Inline-Block arbeitet: http://jsfiddle.net/5zzvqx4b/

... und nicht mit Flexbox arbeiten: http://jsfiddle.net/5zzvqx4b/1/

Ich habe alle Arten von Variationen versucht , mit flex, flex-basis, flex-wrap, flex-grow, etc. , aber für das Leben von mir kann ich nicht an der Arbeit.

Beachten Sie, dass ich es zwingen kann, auf hackige, unflexible Weise das zu tun, was ich will, indem ich die .boxcontainerBreite auf setze 200%. Das funktioniert für dieses einzelne Beispiel, aber in einigen Fällen weiß ich nicht im Voraus, wie viele untergeordnete Boxen es geben wird, und ich würde lieber nicht auf Inline-Styling für jedes Element zurückgreifen, wenn dies möglich ist.

indextwo
quelle
... keine Antwort, aber warum möchten Sie flex ändern, Sie haben bereits einen Arbeitscode, der frei von Präfixen ist und in mehr Browsern funktioniert?
Aufkleber
1
@sdcr: Aufgrund der anderen Anforderungen des Projekts, die bei ~ 20.000 Codezeilen wahrscheinlich eine Weile dauern würden.
Indextwo
1
oh, ok nur zu sagen , dass einige der Biegeeigenschaften Sie setzen es nicht einmal notwendig, wie flex-direction: row;, justify-content: flex-start;, align-items: flex-start;sind die Standardregeln, es sei denn , dass Sie sie überschreiben. es ist ein großer Führer hier .
Aufkleber
@sdcr: Danke - in diesem Beispiel ist es in der Tat sehr ausführlich, aber nur, weil ich es direkt aus meinem Stylesheet kopiert und eingefügt habe, in dem es viele Bedingungen und Unterklassen usw. gibt, weshalb die Eigenschaften explizit festgelegt werden . Ich kenne die Flexbox noch nicht gut genug, um sie mir auf den Kopf zu schreiben!
Indextwo
macht Sinn dann, beachten Sie, Browser-Unterstützung für Flex ist IE10 + mit dem Präfix -ms *.
Aufkleber

Antworten:

77

Stellen Sie den Flex-Schrumpfungsfaktor auf Folgendes ein, um zu verhindern, dass die Flex-Elemente schrumpfen 0:

Der Flex-Schrumpfungsfaktor bestimmt, um wie viel das Flex-Element im Vergleich zu den übrigen Flex-Elementen im Flex-Container schrumpft, wenn der negative freie Raum verteilt wird. Wenn weggelassen, wird es auf 1 gesetzt.

.boxcontainer .box {
  flex-shrink: 0;
}

Oriol
quelle
1
Oh guter Herr, danke . Ich habe die flex-shrinkEigenschaft tatsächlich ignoriert, weil die Beschreibungen, die ich gelesen hatte, nicht relevant zu sein schienen. Betrachten Sie sich als akzeptiert in ... 6 Minuten!
Indextwo
46

Sie können die Shorthand-Flex-Eigenschaft verwenden und auf festlegen

flex: 0 0 100%;

Das ist flex-grow, flex-shrinkund flex-basisin einer Linie. Das Flex-Schrumpfen wurde oben beschrieben, das Flex-Wachstum ist das Gegenteil und die Flex-Basis ist die Größe des Behälters.

Nick Salloum
quelle
Genial! Super praktisch zu wissen.
HartleySan
23

In meinem Fall hat es einfach flex-shrink: 0nicht funktioniert. Aber das Hinzufügen flex-grow: 1hat funktioniert.

.item {
    flex-shrink: 0;
    flex-grow: 1;
}
Xpleria
quelle