我有4个div我正在使用flexbox对齐。在桌面大小下，有3个等宽列，第一个和最后一个div占了容器的整个高度。第二个和第三个divs在中间垂直堆叠，各占高度的50%。效果不错。
在移动大小，我希望最后一个div在顶部，并伸展整个宽度的容器。然后，我希望第一个div在顶部div下方左对齐，并占据容器宽度和剩余高度的50%。
我遇到的问题是，我希望第二个和第三个div在顶部div的正下方对齐，并且占据剩余的50%的宽度，但是要垂直堆叠，所以每个div占据剩余的50%的高度。
我试过更改媒体查询中的flex-direction以及我能想到的其他所有内容，但都不起作用。
null
* {
margin: 0;
padding: 0;
}
.box-wrapper {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 70vh;
align-items
}
.boxa {
background: red;
flex: 0 0 100%;
width: 33%;
}
.boxb {
background: orange;
}
.boxc {
background: lightgreen;
}
.boxb,
.boxc {
flex: 0 0 50%;
width: 33%;
}
.boxd {
background: grey;
flex: 0 0 100%;
width: 33%;
}
@media (max-width: 700px) {
.boxa {
order: 2;
width: 50%;
flex: 0 0 75%;
}
.boxb {
order: 3;
width: 50%;
flex: 0 0 37.5%;
}
.boxc {
order: 4;
width: 50%;
flex: 0 0 37.5%;
}
.boxd {
order: 1;
flex: 0 0 25%;
width: 100%;
}
}<div class="box-wrapper">
<div class="boxa"></div>
<div class="boxb"></div>
<div class="boxc"></div>
<div class="boxd"></div>
</div>null
您想要的布局很难用flexbox实现，因为flexbox不太适合二维网格。它擅长于一维网格（在行或列中放置柔性项目），但在二维网格（在行和列中放置柔性项目）中的能力有限。
由于您想要的布局涉及到必须交叉行和列线的项，因此flex不是您的最佳选择。使用CSS网格，您的布局简单易行。
jsFiddle演示
null
.box-wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 3 equal width columns */
grid-template-rows: 1fr 1fr; /* 2 equal height rows */
height: 70vh;
grid-column-gap: 5px;
grid-row-gap: 5px;
padding: 5px;
grid-template-areas: " first second last "
" first third last ";
}
.boxa { grid-area: first; background: red; }
.boxb { grid-area: second; background: orange; }
.boxc { grid-area: third; background: lightgreen; }
.boxd { grid-area: last; background: grey; }
@media ( max-width: 700px) {
.box-wrapper {
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: " last last "
" first second "
" first third ";
}
}
* { margin: 0; padding: 0; }
/* for placing and styling numbers only */
.box-wrapper > div {
font-size: 1.5em; display: flex; align-items: center; justify-content: center; }<div class="box-wrapper">
<div class="boxa">1</div>
<div class="boxb">2</div>
<div class="boxc">3</div>
<div class="boxd">4</div>
</div>