Flexbox的佈局模式：3分格排序（1分大左，2小右堆疊）

Question

我想才達到與Flexbox的下列有序佈局：

HTML：

<ul class="box-wrapper"> 
    <li class="box boxa">BOX A</li> 
    <li class="box boxb">BOX B</li> 
    <li class="box boxc">BOX C</li> 
</ul> 

CSS：

.box-wrapper{ 
    display:flex; 
} 
.boxa{ 
    order: 1; 
    // should be: width: 50%; 
    // should be: height: 100%; 
} 
.boxb{ 
    order: 3; 
    // should be: width: 50%; 
    // should be: height: 100%; 
} 
.boxc{ 
    order: 2; 
    // should be: width: 50%; 
    // should be: height: 100%; 
} 

箱-b和箱-C浮似乎並不管用，所以我希望任意子e可以幫助我解決這個問題。 更改HTML佈局不是這個選項。

Answer 1

使用flexbox，您將需要一個已知（或可計算的）高度來實現此而不更改HTML。

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.box-wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
    height: 200px; 
 
    list-style-type: none; 
 
} 
 
.boxa { 
 
    background: red; 
 
    flex: 0 0 100%; 
 
    width: 50%; 
 
} 
 
.boxb { 
 
    background: orange; 
 
    order: 2 
 
} 
 
.boxc { 
 
    background: lightgreen; 
 
} 
 
.boxb, 
 
.boxc { 
 
    flex: 0 0 50%; 
 
    width: 50%; 
 
}

<ul class="box-wrapper"> 
 
    <li class="box boxa">BOX A</li> 
 
    <li class="box boxb">BOX B</li> 
 
    <li class="box boxc">BOX C</li> 
 
</ul>