Flexbox-Containerbreite wird nicht vergrößert

Question

Wenn Sie die Flexbox in der Standardreihenrichtung verwenden, wird die Containerhöhe so erweitert, dass sie alle Flex-Elemente enthält, auch wenn sie absolut positioniert ist.

#container { 
    position: absolute; 
    display: flex; 
    flex-wrap: wrap; 
} 

#container > div { 
    flex: 0 0 200px; 
    height: 200px; 
} 

Siehe http://codepen.io/tamlyn/pen/dPjLoN/?editors=110

jedoch, wenn die Flex-Richtung Spalte geändert wird, der Behälter auf die Breite eines einzelnen Flex Element zusammenbricht, selbst wenn die Elemente auf der nächsten Spalte wickeln.

#container { 
    position: absolute; 
    display: flex; 
    flex-direction: column; 
    flex-wrap: wrap; 
} 

#container > div { 
    flex: 0 0 200px; 
    width: 200px; 
} 

Siehe http://codepen.io/tamlyn/pen/rarbeN?editors=110

Wie kann ich den Behälter enthalten alle flex Elemente in column Modus machen?

Answer 1

Ich denke, das die CSS Sie suchen:

#container { 
    display: flex; 
    flex-flow: row wrap; 
    border: 1px solid #f00; 
    padding: 1px; 
} 

#container > * { 
    border: 1px solid #555; 
    background-color: #ccc; 
    height: 200px; 
    width: 200px; 
    margin: 1px; 
} 

Der „Container“ wird immer die die Breite ist es Behälter, in diesem Fall ist die Seite, aber jetzt sind die Boxen innerhalb es anpassen richtig.

Lassen Sie mich wissen, wenn ich Ihre Frage missverstanden habe.

aktualisieren

Ich spiele mit dem, was man mehrere Tage sind gefragt jetzt für, und es scheint wirklich, wie es nicht möglich ist, zu tun, was Sie fragen ... zumindest nicht in die Richtung, die du fragst.

Der Container möchte die maximal mögliche Breite sein. Es sei denn, Sie zwingen den Behälter, die genaue Breite zu haben, an welcher Stelle es nicht die volle Breite sein wird, aber es wird sich auch nicht mit dem flexiblen Inhalt biegen.

Answer 2

Ich habe tatsächlich eine CSS-Lösung gefunden, aber es ist nicht die perfekteste Sache der Welt. Hier ist es: http://codepen.io/anon/pen/vEPBKK

Der Trick hier ist, einen visibility: collapsed Container zu erstellen. Im Flex nehmen visibility: collapsed Objekte sich aus dem normalen Flex-Flow heraus, behalten jedoch ihre Abmessungen für den Zweck des Layouts bei. Dies erweitert den Biegebehälter auf die gewünschte Breite, lässt jedoch die Biegeartikel unbeeinträchtigt. Es gibt jedoch ein paar Vorbehalte:

1. Dies erfordert ein bisschen fiedeln. Wie Sie sehen können, ist die magische <div> eine eingestellte Breite, aber es verwendet :nth-child, um zu bestimmen, wie viele Felder davor sind. Wenn Ihr tatsächliches Design in mehr oder weniger als drei Reihen bricht, müssen Sie dies anpassen und Sie müssen sicherlich die Breite des Objekts anpassen.
2. Aufgrund eines Rendering-Fehlers funktioniert dies nicht in IE. Zum Glück, IE falsche Implementierung macht genau das, was Sie in erster Linie ohne Änderungen gewünscht, so alles, was Sie tun müssen, geben Sie IE sein eigenes Stylesheet mit einigen bedingten Anweisungen und schießen die div.magic einige gute alte display: none.

HTML

<div id="container"> 
    <div class="fb"></div> 
    <div class="fb"></div> 
    <div class="fb"></div> 
    <div class="fb"></div> 
    <div class="fb"></div> 
    <div class="fb"></div> 
    <div class="fb"></div> 
    <div class="magic"></div> 
</div> 

CSS

#container { 
    position: absolute; 
    display: flex; 
    flex-direction: column; 
    flex-wrap: wrap; 
    border: 1px solid #f00; 
    height: 650px; 
    padding: 1px; 
} 

#container div.fb { 
    border: 1px solid #555; 
    flex: 0 0 200px; 
    background-color: #ccc; 
    width: 200px; 
    margin: 1px; 
    height: 200px; 
} 

#container > div.magic { 
    height: 0; 
    margin: 0; 
    padding: 0; 
    visibility: collapsed; 
} 

#container > div.magic:nth-child(5), 
#container > div.magic:nth-child(6), 
#container > div.magic:nth-child(7) { 
    width: 408px; 
} 

#container > div.magic:nth-child(8), 
#container > div.magic:nth-child(9), 
#container > div.magic:nth-child(10) { 
    width: 612px; 
} 

#container > div.magic:nth-child(11), 
#container > div.magic:nth-child(12), 
#container > div.magic:nth-child(13) { 
    width: 816px; 
} 

Answer 3

.flex-container { 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style: none; 
 
    
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    
 
    -webkit-flex-flow: row wrap; 
 
    justify-content: space-around; 
 
    border: 1px solid #f00; 
 
} 
 

 
.flex-item { 
 
    background-color: #ccc; 
 
    padding: 5px; 
 
    width: 200px; 
 
    height: 150px; 
 
    line-height: 150px; 
 
    color: white; 
 
    font-weight: bold; 
 
    font-size: 3em; 
 
    text-align: center; 
 
    border: 1px solid #555; 
 
}

<div id="container" class="flex-container"> 
 
    <div class="flex-item">1</div> 
 
    <div class="flex-item">2</div> 
 
    <div class="flex-item">3</div> 
 
    <div class="flex-item">4</div> 
 
    <div class="flex-item">5</div> 
 
    <div class="flex-item">6</div> 
 
    <div class="flex-item">7</div> 
 
</div>

Der erste Versuch Ich verstehe nicht, was Sie als Referenzmaterial meinen Sie kann dieses Tutorial sehen https://css-tricks.com/snippets/css/a-guide-to-flexbox/