仅CSS砌体布局

提问者：小点点

我需要实施一个相当普通的砖石结构布局。然而，由于许多原因，我不想使用JavaScript来完成此操作。

参数:

所有元素都具有相同的宽度
元素的高度无法在服务器端计算（图像加上不同数量的文本）
如果必须，我可以使用固定数量的列

在现代浏览器中，有一个简单的解决方案，即column-count属性。

该解决方案的问题是元素按列排序:

而我需要将元素按行排序，至少大致如下:

我尝试过的方法都不起作用:

使项目显示:内联块:浪费垂直空间。
制作项目float:left:lol，no.

现在我可以更改服务器端呈现并重新排序项目，将项目数除以列数，但这很复杂，容易出错（基于浏览器决定将项目列表拆分成列的方式），因此如果可能的话，我希望避免这样做。

有没有什么新奇的flexbox魔力让这一切成为可能？

共2个答案

匿名用户

flexbox不可能进行动态砌体布局，至少不可能以清洁和高效的方式进行。

Flexbox是一个一维布局系统。这意味着它可以沿着水平线或垂直线对齐项目。 flex项被限制在它的行或列中。

真正的网格系统是二维的，这意味着它可以沿着水平线和垂直线对齐项目。内容项可以同时跨越行和列，这是flex项无法做到的。

这就是为什么flexbox构建网格的能力有限的原因。这也是W3C开发另一种CSS3技术网格布局的原因。

在具有flex-flow:row wrap的flex容器中，flex项必须包装到新行。

这意味着flex项不能在同一行中的另一项下换行。

注意上面的div#3是如何在div#1下面换行的，创建了一个新行。它不能在div#2下面换行。

因此，当项目不是行中最高的时，留有空白，造成难看的空隙。

如果切换到flex-flow:column wrap，网格状布局更容易实现。但是，列方向容器一开始就有四个潜在问题:

Flex项垂直流动，而不是水平流动（就像您在本例中需要的那样）。
容器水平展开，而不是垂直展开（如Pinterest布局）。
它要求容器具有固定的高度，以便项目知道包装的位置。
在撰写本文时，它在所有主要浏览器中都有一个缺陷，即容器不能扩展以容纳额外的列。

因此，在这种情况下以及在许多其他情况下，列方向容器都不是一个选项。

如果可以预先确定内容项的不同高度，网格布局将是您的问题的完美解决方案。所有其他需求都在网格的能力范围内。

网格项目的宽度和高度必须已知，以便与周围项目闭合间隙。

因此，网格是CSS为构建水平流动的砖石布局所提供的最好的工具，但在这种情况下却显得力不从心。

事实上，在CSS技术能够自动弥合差距之前，CSS通常没有解决方案。像这样的东西可能需要重新生成文档，所以我不确定它会有多有用或多有效。

你需要一个剧本。

JavaScript解决方案倾向于使用绝对定位，它从文档流中移除内容项，以便重新排列它们，没有空隙。这里有两个例子:

Desandro砌体

Masonry是一个JavaScript网格布局库。它的工作原理是根据可用的垂直空间将元素放置在最佳位置，有点像泥瓦匠在墙上安装石头。

^{来源:http://masonry.desandro.com/}

如何建立一个类似Pinterest的网站

[Pinterest]确实是一个很酷的网站，但我觉得有趣的是这些插板的布局方式。。。所以本教程的目的就是我们自己重新创造这种反应性的块效果……

^{来源:https://benholland.me/javascript/2012/02/20/how-to-build-a-site-that-works-like-pinterest.html}

对于内容项的宽度和高度已知的布局，下面是纯CSS中的水平流动砖石布局:

null

grid-container {
  display: grid;                                                /* 1 */
  grid-auto-rows: 50px;                                         /* 2 */
  grid-gap: 10px;                                               /* 3 */
  grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));   /* 4 */
}

[short] {
  grid-row: span 1;                                             /* 5 */
  background-color: green;
}

[tall] {
  grid-row: span 2;
  background-color: crimson;
}

[taller] {
  grid-row: span 3;
  background-color: blue;
}

[tallest] {
  grid-row: span 4;
  background-color: gray;
}

grid-item {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3em;
  font-weight: bold;
  color: white;
}

<grid-container>
  <grid-item short>01</grid-item>
  <grid-item short>02</grid-item>
  <grid-item tall>03</grid-item>
  <grid-item tall>04</grid-item>
  <grid-item short>05</grid-item>
  <grid-item taller>06</grid-item>
  <grid-item short>07</grid-item>
  <grid-item tallest>08</grid-item>
  <grid-item tall>09</grid-item>
  <grid-item short>10</grid-item>
  <grid-item tallest>etc.</grid-item>
  <grid-item tall></grid-item>
  <grid-item taller></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item taller></grid-item>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item tallest></grid-item>
  <grid-item taller></grid-item>
  <grid-item short></grid-item>
  <grid-item tallest></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
</grid-container>

匿名用户

这是最近发现的涉及FlexBox的技术:https://tobiasahlin.com/blog/masonry-with-css/。

这篇文章对我来说很有意义，但我还没有试过使用它，所以我不知道除了Michael的回答中提到的以外，是否还有其他的警告。

下面是本文的一个示例，它使用了order属性和:nth-child。

堆栈段

null

.container {
  display: flex;
  flex-flow: column wrap;
  align-content: space-between;
  /* Your container needs a fixed height, and it 
   * needs to be taller than your tallest column. */
  height: 960px;
  
  /* Optional */
  background-color: #f7f7f7;
  border-radius: 3px;
  padding: 20px;
  width: 60%;
  margin: 40px auto;
  counter-reset: items;
}

.item {
  width: 24%;
  /* Optional */
  position: relative;
  margin-bottom: 2%;
  border-radius: 3px;
  background-color: #a1cbfa;
  border: 1px solid #4290e2;
  box-shadow: 0 2px 2px rgba(0,90,250,0.05),
    0 4px 4px rgba(0,90,250,0.05),
    0 8px 8px rgba(0,90,250,0.05),
    0 16px 16px rgba(0,90,250,0.05);
  color: #fff;
  padding: 15px;
  box-sizing: border-box;
}

 /* Just to print out numbers */
div.item::before {
  counter-increment: items;
  content: counter(items);
}

/* Re-order items into 3 rows */
.item:nth-of-type(4n+1) { order: 1; }
.item:nth-of-type(4n+2) { order: 2; }
.item:nth-of-type(4n+3) { order: 3; }
.item:nth-of-type(4n)   { order: 4; }

/* Force new columns */
.break {
  flex-basis: 100%;
  width: 0;
  border: 1px solid #ddd;
  margin: 0;
  content: "";
  padding: 0;
}

body { font-family: sans-serif; }
h3 { text-align: center; }

<div class="container">
  <div class="item" style="height: 140px"></div>
  <div class="item" style="height: 190px"></div>
  <div class="item" style="height: 170px"></div>
  <div class="item" style="height: 120px"></div>
  <div class="item" style="height: 160px"></div>
  <div class="item" style="height: 180px"></div>
  <div class="item" style="height: 140px"></div>
  <div class="item" style="height: 150px"></div>
  <div class="item" style="height: 170px"></div>
  <div class="item" style="height: 170px"></div>
  <div class="item" style="height: 140px"></div>
  <div class="item" style="height: 190px"></div>
  <div class="item" style="height: 170px"></div>
  <div class="item" style="height: 120px"></div>
  <div class="item" style="height: 160px"></div>
  <div class="item" style="height: 180px"></div>
  <div class="item" style="height: 140px"></div>
  <div class="item" style="height: 150px"></div>
  <div class="item" style="height: 170px"></div>
  <div class="item" style="height: 170px"></div>
  
  <span class="item break"></span>
  <span class="item break"></span>
  <span class="item break"></span>
</div>