html - 如何将 flexbox 包装在多行和多列上？

Question

我正在尝试以砖石结构的形式构建一个画廊，但我无法理解 flexbox 的包装？

我有一个简单的 UL 列表，我已经添加了所需的样式，但内容并没有像它应该的那样 float 和环绕。

.masonry {

  margin: 48px -2px;
  padding-left: 0;
  list-style: none;
  align-items: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
  display: flex;
}

.masonry li {
	
  height: 300px;
  flex-basis: calc(33.33% - 4px);
  margin: 2px;
  text-align: center;
  display: flex;
  
  background-color: #C9F4FF;
}

.masonry li:nth-child(1), .masonry li:nth-child(7) {

  height: 604px;
  
  background-color: #FFB4FF;
}

.masonry li:nth-child(4), .masonry li:nth-child(4) {

  flex-basis: calc(66.66% - 4px);
  background-color: #B9EDA8;
}

<!-- masonry starts -->
    <ul class="masonry">
        <li>&nbsp;</li>
        <li>&nbsp;</li>
        <li>&nbsp;</li>
        <li>&nbsp;</li>
        <li>&nbsp;</li>
        <li>&nbsp;</li>
        <li>&nbsp;</li>
        <li>&nbsp;</li>
    </ul>
<!-- masonry ends -->

结果看起来像这样，这有点有趣:)

也许有人知道如何编写正确的 CSS 来使事情正确包装？

Answer 1

Flexbox 不能用它自己的布局功能做到这一点，它需要一些帮助，所以这里有一个 CSS 解决方案，假设元素的大小是给定的。

这里的主要技巧是在 li 中添加一个额外的元素并将其设为“样式化”，并使用 li用于主要布局。

“浅绿色”元素有左/右边距，相应地插入它们，并为“浅紫色”腾出空间。

由于 flex 元素(此处为 li )无法在垂直和水平方向上动态增长，我们改为使用其内部的 div取两倍的高度，并以此启用请求的布局。

此设置与 Flexbox 的 order 相结合属性，现在可以非常简单地使用例如调整其布局。纵向布局(垂直堆叠)等的媒体查询

---

请注意，要根据内容动态调整大小，需要脚本或 CSS 网格。

这是一篇很好的文章，阐明了 Masonry 的一些亮点(以及更多解决方案):

• CSS-only masonry layout but with elements ordered horizontally

---

堆栈片段

.masonry {
  margin: 48px -2px;
  padding-left: 0;
  list-style: none;
  align-items: flex-start;
  flex-wrap: wrap;
  display: flex;
}

.masonry li {
  flex-basis: calc(100% / 3);
  height: 200px;
  display: flex;
}

.masonry li div {
  display: relative;
  flex: 1;
  margin: 2px;
  text-align: center;
  display: flex;
  background-color: #C9F4FF;
}

.masonry li:nth-child(1) div,
.masonry li:nth-child(7) div {
  display: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(200% - 4px);              /*  twice the height  */
  background-color: #FFB4FF;
}

.masonry li:nth-child(4),
.masonry li:nth-child(8) {
  flex-basis: 100%;                      /*  100% width to force wrap  */
}

.masonry li:nth-child(4) div,
.masonry li:nth-child(8) div {
  background-color: #B9EDA8;
}

.masonry li:nth-child(4) div {
  margin-left: calc((100% / 3) + 2px);   /*  pushed to left  */
}

.masonry li:nth-child(8) div {
  margin-right: calc((100% / 3) + 2px);  /*  pushed to right  */
}

<!-- masonry starts -->
<ul class="masonry">
    <li><div>&nbsp;</div></li>
    <li><div>&nbsp;</div></li>
    <li><div>&nbsp;</div></li>
    <li><div>&nbsp;</div></li>
    <li><div>&nbsp;</div></li>
    <li><div>&nbsp;</div></li>
    <li><div>&nbsp;</div></li>
    <li><div>&nbsp;</div></li>
</ul>
<!-- masonry ends -->