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

浮动 box-b 和 box-c 似乎不起作用。更改 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>