CSS弹性盒子布局：两列，高度不同

Question

我有以下代码：

.wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.a {
  background-color: red;
  width: 65%;
}

.b {
  background-color: green;
  width: 35%;
}

.c {
  background-color: blue;
  width: 65%;
  height: 100px;
}

.d {
  background-color: orange;
  width: 35%;
}

.e {
  background-color: teal;
  width: 65%;
}

.f {
  background-color: purple;
  width: 35%;
}

<div class="wrapper container">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
  <div class="d">D</div>
  <div class="e">E</div>
  <div class="f">F</div>
</div>

我试图让F紧挨在D下面，像这样：

我这样做的主要原因是不想使用两个独立的列，而是希望能够通过使用 order 在移动端后期排列这些列。在Flexbox中是否有可能实现这一点，或者还有其他更好的方式吗？

- Tompina

---

当前的HTML结构无法实现，需要使用Flexbox方式。 - VXp

Answer 1

为了让 flex 列换行，需要在容器上定义一个固定的高度。否则，在没有断点的情况下，列没有理由换行。它将只会将容器扩展为单列。

这个问题在这里有更详细的解释：

• 是否有可能让 flex 项与上面的项紧密对齐？

你可能更适合使用网格解决方案。

.wrapper {
  display: grid;
  grid-template-columns: 65% 35%;
  grid-template-areas: " a b "
                       " c d "
                       " c f "
                       " c . "
                       " c . "                       
                       " e . " ;}

.a { grid-area: a; background-color: red;    }
.b { grid-area: b; background-color: green;  }
.c { grid-area: c; background-color: blue; height: 100px; }
.d { grid-area: d; background-color: orange; }
.e { grid-area: e; background-color: teal;   }
.f { grid-area: f; background-color: purple; }

<div class="wrapper">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
  <div class="d">D</div>
  <div class="e">E</div>
  <div class="f">F</div>
</div>

CSS Grid现在得到了广泛的浏览器支持。

此外，order属性在Grid和Flex布局中都可以使用。但是，在Grid中，您可能不需要order来重新排列手机屏幕上的布局。您可以直接使用网格属性。

- Michael Benjamin

---

这确实能够产生我想要的图片效果，但是每当我向 div A 添加更多内容时，div B 也会随之扩展。我查看了您发布的帖子，现在我确定如果没有 JavaScript 是不可能实现我想要的效果的。谢谢！ - Tompina

请发布一个更完整的示例来提出新问题。内容是否动态添加到每个网格项中？如果您事先知道高度，则可以在不使用脚本的情况下完成布局。有关详细信息，请参见我的答案：https://dev59.com/s1cP5IYBdhLWcg3wd5qm - Michael Benjamin

Answer 2

受Easy-Masonry-Layout-With-Flexbox启发

看起来对我很有用

<div id="masonry">
    <img src="irina.jpg" alt>
    <img src="daniella.jpg" alt>
    <img src="karina.jpg" alt>
    …
</div>

div#masonry {
  display: -ms-flexbox;
  -ms-flex-direction: column;
  -ms-flex-wrap: wrap;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100vw;
  font-size: 0; 
}

div#masonry img { 
    width: 33.3%;
    transition: .8s opacity;
}

- Tabraiz Malik