如何使用纯CSS创建瀑布流布局？

Question

4

我想使用纯CSS创建砌体布局，我已经阅读了互联网上的所有教程，但它们都使用列属性来分割布局。这里的问题是布局将显示如下（其中1,2,3...是项目）。

1|3|5
2|4|6

我希望我的布局必须是：

1|2|3
4|5|6

我想只使用CSS解决问题，请告诉我您是否有任何解决方案或想法。

- Xuân Hiển Ngô

1

Masonry是基于Javascript构建的，因为它可以检测位置并将所有内容放置在绝对位置。CSS无法检测位置，但您可以使用@media查询和position:absolute。 - Daan

@DaanHeskes 使用CSS是不可能的，对吧？那么你能给我一些例子吗？ - Xuân Hiển Ngô

绝对不是不可能的，但也不是自动对齐等。这就是Javascript所做的。您可以使用position:absolute来定位所有内容，并设置top和left偏移量。然后使用CSS3媒体查询在较小/较大的屏幕上进行更改。 - Daan

好的，谢谢@DaanHeskes的帮助。 - Xuân Hiển Ngô

还没有尝试过，但也许可以使用 flexbox，使用 flex-direction 和 flex-wrap。请参阅 https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 了解文档。 - Wim Mertens

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Libi · Answer 1

你可以使用弹性盒子布局。参考codepen的示例，以及完整的弹性盒子布局指南来了解更多。

为了保持布局水平，请根据需要调整flex-direction属性。