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具有灵活的高度，因此必须适应它。

如果没有将b，c和d包装在一个单独的div中，是否可以这样做？

Answer 1

是的，您可以使用flexbox完成完全 ...当然，您需要在较小的视口尺寸上决定第一个div的宽度，但是我假设你已经准备好了所需的媒体查询。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Codepen Demo

Answer 2

仅在需要时使用flexbox：在桌面版上：

＆＃13;

＆＃13;

*    { box-sizing: border-box; }
body { margin: 0; }
#a   { background: tomato; }
#b   { background: forestgreen; }
#c   { background: dodgerblue; }
#d   { background: orange; }

#wrapper {
    overflow: hidden;
    position: relative;
}
#wrapper > div {
    float: left;
    width: 50%;
    margin-left: 50%;
    padding: 5px;
}
#wrapper > #a {
    position: absolute;
    height: 100%;
    margin-left: 0;
}
@media all and (min-width: 768px) {
    #wrapper {
        display: flex;
    }
    #wrapper > div {
        margin-left: 0;
    }
    #wrapper > #a {
        position: relative;
        height: auto;
}

＆＃13;

<div id="wrapper">
  <div id="a">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl.</div>
  <div id="b">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh.</div>
  <div id="c">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius.</div>
  <div id="d">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper.</div>
</div>

＆＃13;

＆＃13;

＆＃13;