2013-11-22 13 views
13

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:CSS flex-podstawa nie działa, gdy flex-kierunek jest „Kolumna”

enter image description here

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

enter image description here

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

enter image description here

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>

+1

Dlaczego nie zagnieździć bloków odczytu i niebieskiego? Następnie nadaj zewnętrznej siatce kierunek poziomy i wewnętrzną siatkę pionowo. To więcej znaczników, ale będzie działać: P –

+1

Orientacja kolumna wymaga wyraźnego wysokość, aby wartość flex-Podstawa być czczony jak można oczekiwać z elementami owijania. – cimmanon

+0

@imimmanon Dzięki. Z ciekawości, dlaczego tak nie jest, gdy siatka jest rzędowa? Nie mogę znaleźć niczego odpowiedniego w specyfikacji. –

Odpowiedz

0

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ż:

enter image description here

+0

OP chce to zrobić * bez * ustawienia wyraźnej wysokości, co nie jest możliwe (przynajmniej nie bez zagnieżdżania). – cimmanon

+0

tak, zgadzam się, że zagnieżdżanie wydaje się być rozwiązaniem. Czy myślisz, że ustawienie 'flex-basis' ma określoną wysokość? Czy odnosisz się do wzrostu ciała? –

+0

Wysokość elastycznego pojemnika. Podstawą elastyczności jest * nie * wyraźna wysokość, jest to sugerowany pomiar na osi głównej. – cimmanon

-1

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)

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ść.

1

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.