Szerokość kontenera Flex nie rośnie

Question

Podczas korzystania z modułu Flex Box w domyślnym kierunku wierszy wysokość kontenera rośnie, aby pomieścić wszystkie elementy elastyczne, nawet jeśli są ustawione absolutnie.

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

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

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

Jednak jeśli flex kierunek zmienia się na kolumnie, pojemnik zwija do szerokości jednego elastycznego elementu, nawet jeśli elementy zawijać do następnej kolumny.

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

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

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

Jak mogę sprawić, że pojemnik zawiera wszystkich elementów flex w trybie column?

Answer 1

myślę, że to jest CSS szukasz: zawsze

#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; 
} 

The „pojemnik” będzie szerokość swojego pojemnika, w tym przypadku strona, ale teraz pola dostosuje się w niej prawidłowo.

Daj mi znać, jeśli źle zrozumiałem twoje pytanie.

Aktualizacja

Grałem z co pytasz na kilka dni teraz, i to naprawdę wydaje się, że to nie jest możliwe, aby robić to, co pytasz ... przynajmniej nie w kierunek, o który pytasz.

Kontener chce mieć maksymalną szerokość. Jeśli nie wymusisz, by pojemnik był dokładnie taką samą szerokością, w którym to momencie nie będzie to pełna szerokość, ale też nie zgina się wraz z elastyczną treścią.

Answer 2

Znalazłem rozwiązanie tylko CSS, ale nie jest to najdoskonalsza rzecz na świecie. Oto ona: http://codepen.io/anon/pen/vEPBKK

Sztuką tutaj jest stworzenie kontenera visibility: collapsed. W obiektywie elastycznym obiekty wychodzą z normalnego przepływu elastycznego, ale zachowują swoje wymiary w celu układu. To rozszerza elastyczny pojemnik do pożądanej szerokości, ale pozostawia nienaruszone elementy elastyczne. Istnieje jednak kilka zastrzeżeń:

1. Wymaga to trochę skrzypiec. Jak widać, magia <div> jest ustawioną szerokością, ale używa :nth-child, aby określić, ile pól jest przed nią. Jeśli rzeczywisty projekt zostanie przerwany na więcej lub mniej niż 3 wiersze, musisz to zmienić, a na pewno będziesz musiał dostosować szerokość obiektu.
2. Z powodu błędu renderowania, to nie działa w IE. Na szczęście niepoprawna implementacja IE robi dokładnie to, czego chciałeś, bez żadnych zmian, więc wszystko, co musisz zrobić, to dać IE własny arkusz stylów z pewnymi warunkowymi instrukcjami i zestrzelić stare, dobre div.magic.

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>

Pierwsza próba nie rozumiem co masz na myśli jako materiał referencyjny ty Można zobaczyć ten tutorial https://css-tricks.com/snippets/css/a-guide-to-flexbox/