CSS flex-podstawa nie działa, gdy flex-kierunek jest „Kolumna”

Question

Moim celem jest stworzenie dwukolumnowy układ ze schematu flexbox której pierwsza kolumna posiada dwa wiersze, a druga kolumna ma jeden, na przykład:

Ustawianie flex-basis: 100% na trzeciej pozycji daje pożądany efekt, ale tylko wtedy, gdy jest pojemnik na flex-directionrow:

Zmiana flex-direction do column wyniki w dalszej części, chyba że height jest ustawiony wyraźnie, co jest niewykonalne w moim projekcie:

Jak mogę uzyskać pierwsze zdjęcie bez wyraźnego ustawiania height pojemnika?

Here's a Plunker illustrating the problem.

body { 
 
    display: flex; 
 
    height: 100px; 
 
    width: 100px; 
 
} 
 
.container { 
 
    display: flex; 
 
    flex-direction: column; /* Setting this to `row` gives the expected effect,but rotated */ 
 
    flex-grow: 1; 
 
    flex-wrap: wrap; 
 
    /* height: 100%; */ /* Setting this fixes the problem, but is infeasible for my project*/ 
 
} 
 
.item { 
 
    flex-grow: 1; 
 
} 
 
.one { 
 
    background-color: red; 
 
} 
 
.two { 
 
    background-color: blue; 
 
} 
 
.three { 
 
    background-color: green; 
 
    flex-basis: 100%; 
 
}

<div class="container"> 
 
    <div class="item one">&nbsp;</div> 
 
    <div class="item two">&nbsp;</div> 
 
    <div class="item three">&nbsp;</div> 
 
</div>

Answer 1

O ile mi zrozumieć, następujący kod daje wynik, który chcesz:

body { 
    display: flex; 
    height: 100px; 
    width: 100px; 
} 

.container { 
    display: flex; 
    flex-direction: column; 
    flex-wrap: wrap; 
    flex-grow:1; 
} 

.item { 
    flex-basis:50%; 
} 

.one { 
    background-color: red; 
} 

.two { 
    background-color: blue; 

} 

.three { 
    background-color: green; 
    flex-basis:100%; 
} 

wyjątkiem od flex-basis:50%; Ten kod jest równa kodu używanego w plunker. Z jakiegoś powodu plunker nie obsługuje flex-basis, patrz również:

Answer 2

myślę, że należy budować swój układ za pomocą systemu sieciowego w umyśle. Na twoim pierwszym zdjęciu widzimy 2 coli: pierwszy col to czerwony i niebieski, drugi col to zielony.

I wtedy struktura powinna być tak:

<div class="flex-container"> 
    <div class="col column"> 
     <div class="content red"></div> 
     <div class="content blue"></div> 
    </div> 
    <div class="col"> 
     <div class="content green"></div> 
    </div> 
</div> 

Stosując te style:

.flex-container { 
    display:flex; 
} 
.col { 
    flex:1; 
    display:flex; 
} 
.column { 
    flex-direction:column; 
} 
.content { 
    flex:1; 
} 

Oto krótki kod stosując swój cel demo: https://jsfiddle.net/wyyLvymL/ Nadzieję, że to pomaga! (Jeśli trzeba zrozumieć, jak to działa, ping mnie)

Answer 3

Dlaczego to nie działa:

Flex owinąć tylko się dzieje, gdy początkowy rozmiar główny z elementów typu flex flex przepełnienia pojemnika . W przypadku flex-direction: row jest tak, gdy elementy flex są szersze niż kontener. Z flex-direction: column muszą one przepełnić wysokość pojemnika.

Ale w CSS wysokość zachowuje się zasadniczo inaczej niż szerokość. Wysokość kontenera w CSS zależy od wysokości jego dzieci. W związku z tym, bez potrzeby ograniczania wysokości kontenera, elementy flex nigdy się nie przeleją; po prostu zwiększają kontener. Jeśli się nie przepełnią, nie będą się zawijać.

Możliwe rozwiązania:

Trzeba ograniczyć wysokość pojemnika. Oczywistym sposobem (który powiedziałeś, że nie ma w tabeli) jest ustawienie wyraźnej nazwy: height lub max-height.

Zadaj sobie pytanie, dlaczego trzeba ograniczyć wysokość. Czy ma pozostać w widocznym obszarze? Możesz użyć jednostek viewport-relative i ustawić coś takiego jak max-height: 100vh. Czy jest równa wysokości innej kolumny poza tym elastycznym pojemnikiem? Możesz być w stanie ograniczyć to za pomocą innego flexboxa. Ustaw ten elastyczny pojemnik jako element elastyczny w zewnętrznym pudełku flexbox. Coś innego w tym zewnętrznym flexboxie musiałoby jednak ustalić jego wysokość.

Answer 4

spróbuj ustawić flex: none dla bloków wewnątrz pojemnika w stanie po zmianie orientacji (@media itp)

testowałem go w Chrome i Firefox.