弹性项目是否有可能与它们上方的项目紧密对齐？

Question

这实际上是 Pinterest 布局。但是网上找到的解决方案都是用列包裹的，这意味着容器会在不经意间横向增长。这 不是 Pinterest 的布局，它不适用于动态加载的内容。

我想要做的是有一堆固定宽度和不对称高度的图像，水平放置但在满足固定宽度容器的限制时换行：

flexbox 可以做到这一点，还是我必须求助于像 Masonry 这样的 JS 解决方案？

原文由 Guybrush Threepwood 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Flexbox 是一个“一维”布局系统：它可以沿水平或垂直线对齐项目。

真正的网格系统是“二维”的：它可以沿水平和垂直线对齐项目。换句话说，单元格可以跨越列和行，这是 flexbox 做不到的。

这就是为什么 flexbox 构建网格的能力有限。这也是 W3C 开发了另一种 CSS3 技术 Grid Layout （见下文）的原因。

---

在带有 flex-flow: row wrap 的弹性容器中，弹性项目必须换行到新 _行_。

这意味着 弹性项目不能换行在同一行中的另一个项目之下。

请注意上面的 div #3 如何包裹在 div #1 之下，创建一个新行。它不能包裹在 div #2 之下。

结果，当项目不是行中最高的时候，空白仍然存在，造成难看的间隙。

图片来源： Jefree Sujit

---

column wrap 解决方案

如果切换到 flex-flow: column wrap ，弹性项目将垂直堆叠并且更容易实现类似网格的布局。然而，列向容器有三个潜在的问题：

1. 它水平扩展容器，而不是垂直扩展（类似于 Pinterest 布局）。
2. 它要求容器具有固定的高度，以便物品知道在哪里包装。
3. 在撰写本文时，它在所有主要浏览器中都存在缺陷，其中 容器不会扩展以容纳额外的列。

因此，列方向容器在许多情况下可能不可行。

---

其他解决方案

• 添加容器

在上面的前两个图像中，考虑将项目 2 和 3 包装在一个单独的容器中。这个新容器可以是项目 1 的兄弟。完成。

这是一个详细的例子： Calculator keypad layout with flexbox

一个值得强调的缺点：如果您想使用 order 属性重新安排您的布局（例如在媒体查询中），此方法可能会消除该选项。

• 德桑德罗砌体

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 网格布局模块级别 1

这个 CSS 模块定义了一个基于网格的二维布局系统，针对用户界面设计进行了优化。在网格布局模型中，网格容器的子项可以放置在预定义的灵活或固定大小布局网格中的任意槽中。

来源： https ://drafts.csswg.org/css-grid/

网格布局示例： 纯 CSS 砌体布局，但元素水平排列

原文由 Michael Benjamin 发布，翻译遵循 CC BY-SA 3.0 许可协议