Ich bin dabei, ein altes inline-block
Gittermodell, 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-space
ist auf eingestellt nowrap
. Mit inline-block
bedeutet 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:
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 .boxcontainer
Breite 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.
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 .Antworten:
Stellen Sie den Flex-Schrumpfungsfaktor auf Folgendes ein, um zu verhindern, dass die Flex-Elemente schrumpfen
0
:.boxcontainer .box { flex-shrink: 0; }
Code-Snippet anzeigen
* { box-sizing: border-box; } .wrapper { width: 200px; background-color: #EEEEEE; border: 2px solid #DDDDDD; padding: 1rem; } .boxcontainer { position: relative; left: 0; border: 2px solid #BDC3C7; transition: all 0.4s ease; display: flex; } .boxcontainer .box { width: 100%; padding: 1rem; flex-shrink: 0; } .boxcontainer .box:first-child { background-color: #F47983; } .boxcontainer .box:nth-child(2) { background-color: #FABCC1; } #slidetrigger:checked ~ .wrapper .boxcontainer { left: -100%; } #overflowtrigger:checked ~ .wrapper { overflow: hidden; }
<input type="checkbox" id="overflowtrigger" /> <label for="overflowtrigger">Hide overflow</label><br /> <input type="checkbox" id="slidetrigger" /> <label for="slidetrigger">Slide!</label> <div class="wrapper"> <div class="boxcontainer"> <div class="box"> First bunch of content. </div> <div class="box"> Second load of content. </div> </div> </div>
quelle
flex-shrink
Eigenschaft tatsächlich ignoriert, weil die Beschreibungen, die ich gelesen hatte, nicht relevant zu sein schienen. Betrachten Sie sich als akzeptiert in ... 6 Minuten!Sie können die Shorthand-Flex-Eigenschaft verwenden und auf festlegen
flex: 0 0 100%;
Das ist
flex-grow
,flex-shrink
undflex-basis
in 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.quelle
In meinem Fall hat es einfach
flex-shrink: 0
nicht funktioniert. Aber das Hinzufügenflex-grow: 1
hat funktioniert..item { flex-shrink: 0; flex-grow: 1; }
quelle