如何垂直浮动/弯曲div然后水平继续

Question

我有一个由许多不同客户定制的布局，因此html结构被锁定到

<div class="container">
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
</div>

注意：不使用bootstrap，容器只是适用的名称

在UI中我需要能够使用CSS从这个结构中制作许多不同的布局而不改变它。有一个特别是我无法弄清楚。所需的布局是：

我知道如果它都是垂直的，那么简单的width和float样式就很容易做到。我也知道在前两个孩子周围抛出一个包含div是一个简单的解决方案，但同样要求保持html不变。

我试过了：

.container {
    display: flex;
    flex-wrap: wrap;
}

.container > div {
    width: 33.33335;
    height: 400px;
}

.container > div:nth-child(1),
.container > div:nth-child(2) {
    height: 200px;
}

为儿童div设置适当的高度，前两个高度是其他人的一半。

同样，我尝试过：

.container > div {
    float: left;
}

.container > div {
    height: 400px;
    width: 33.33333%;
}

.container > div:nth-child(1),
.container > div:nth-child(2) {
    height: 200px;
}

再次给予前两个孩子一半的高度。没有任何工作，在所有结果中，前两个堆栈和其他堆栈不浮动/弯曲或前两个堆栈根本不堆叠。

任何人都可以想出一种CSS方法来为所需的UI设计这种结构样式吗？

感谢帮助。

Answer 1

如果您可以在容器上设置固定高度，则可以将flexbox与flex-flow: column wrap一起使用。固定高度是告诉flex项目包装的必要条件。这是一个例子：

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-around; /* vertical alignment */
  align-content: center;         /* horizontal alignment */
  height: 320px;                 /* essential for this method to work */
  background-color: lightyellow;
  border: 1px dashed red;
}

.container>div {
  flex: 0 0 90%;                 /* flex-grow, flex-shrink, flex-basis */
  width: 30%;
  margin: 5px;
  background-color: lightgreen;
}

.container>div:nth-child(1),
.container>div:nth-child(2) {
  flex-basis: 40%;              /* override flex-basis from rule above */
}

<div class="container">
  <div>content</div>
  <div>content</div>
  <div>content</div>
  <div>content</div>
</div>