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中的情况下实现？

- MarcS

---

如果您将其包装在单独的div中，那么会更容易。为什么不使用它呢？ - m4n0

您可能需要使用@media属性定义单独的移动和桌面样式表：https://dev59.com/rHvaa4cB1Zd3GeqPCWDE。声明单独的样式表可以为所需效果以不同方式实现flex box模型。缺点是，您必须选择一个硬性布局更改尺寸。 - Matt

我不介意使用带有@media属性的单独样式表。问题在于，我完全不知道如何在移动设备上对齐div，而无需将b、c和d包装在单独的div中。 当然，将它们包装在单独的div中是可行的，但从语义角度来看并不是真正必要的。 - MarcS

我认为这是最佳的方法，因为您可以明确地为不同的尺寸定义单独的布局。 - Matt

每当我使用Flex-box模型时，我发现这个参考资料对我来说非常重要，它有一个漂亮的可视化表示：https://css-tricks.com/snippets/css/a-guide-to-flexbox/。 - Matt

谢谢Matt。我以前看过那个资源，实际上我正在使用那里的技巧来制作我的水平桌面布局。只用列或只用行来做是非常容易的，利用Flexbox就能轻松搞定。但我现在还无法弄清如何获得我上面描述的那种表格式的布局。 - MarcS

Answer 1

是的，你可以完全使用 flexbox 来实现这个...当然，你需要在较小的视口大小下为第一个 div 决定一个宽度，但我假设你已经考虑到了所需的媒体查询。

#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

- Paulie_D

---

这正是我所寻找的。谢谢！ - MarcS

Answer 2

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

*    { 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;
}

<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>

- zessx

---

不确定您的答案是否考虑了在全屏桌面上分开放置的div。 - Matt

OP已经完成了桌面版，他是不是在寻求移动解决方案？ - zessx

这取决于#a的固定高度。b、c和d中的数据有些灵活，因此高度可能会有所变化。 - MarcS

不确定，我觉得他们可能是在寻找两者，但也许我对问题的理解有误。 - Matt

@MarcS 我更新了我的答案，向您展示如何使用灵活的div来实现它（仍然不使用移动版本的flexbox）。 - zessx