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”
Ustawianie flex-basis: 100%
na trzeciej pozycji daje pożądany efekt, ale tylko wtedy, gdy jest pojemnik na flex-direction
row
:
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"> </div>
<div class="item two"> </div>
<div class="item three"> </div>
</div>
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 –
Orientacja kolumna wymaga wyraźnego wysokość, aby wartość flex-Podstawa być czczony jak można oczekiwać z elementami owijania. – cimmanon
@imimmanon Dzięki. Z ciekawości, dlaczego tak nie jest, gdy siatka jest rzędowa? Nie mogę znaleźć niczego odpowiedniego w specyfikacji. –