css - Flexbox:使用 rowspan 的布局

Question

我的HTML类似于下面的例子

<div id="wrapper">
 <div id="a">a</div>
 <div id="b">b</div>
 <div id="c">c</div>
 <div id="d">d</div>
</div>

在桌面上，我希望 div 彼此相邻显示，这当然是微不足道的。

在移动设备上，我希望有类似于以下内容的类似表格的布局

b、c 和 d 具有灵活的高度，因此 a 必须适应这一点。

如果不将 b、c 和 d 包装在单独的 div 中，是否可以做到这一点？

Answer 1

是的，您可以使用 flexbox完全来做到这一点...当然，您需要决定第一个 div 在较小视口(viewport)尺寸下的宽度但我假设您已经为所需的媒体查询做好了准备。

#wrapper {
  height: 100vh;
  width: 90vw;
  border: 1px solid grey;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  margin: 10px auto;
}
#wrapper div {
  flex: 1 0 auto;
  border: 1px solid white;
  background: lightblue;
  text-align: center;
}
#a {
  flex-grow: 1;
  height: 100%;
  flex-basis: 50%;
}
@media screen and (min-width: 640px) {
  #a {
    height: auto;
    flex-grow: none;
    flex-basis: auto;
  }
}

<div id="wrapper">
  <div id="a">a</div>
  <div id="b">b</div>
  <div id="c">c</div>
  <div id="d">d</div>
</div>

Codepen Demo