CSS Flex Box Gallery 问题

Question

目前我正在尝试使用 flex box 创建一个“图片库”。这是我目前拥有的:https://jsfiddle.net/neu28Lnc/2/

图像的宽度始终为 50% - 这意味着我将始终有 2 张图像并排放置。页面的高度不固定 - 您应该能够滚动/添加更多图像。

我遇到的问题是，我想消除这些图像之间的间隙。像这样:https://jsfiddle.net/neu28Lnc/1/ (用边距硬编码)。

通常我会使用 flex-direction: column; 但是因为我没有高度，它永远不会换行到第二列。

也许你们中的一些人可以帮助我解决我的问题/有更好的解决方案。

提前致谢。

西尔兹

Answer 1

你可以用css Grid做一些事情，但毕竟css grid当然更适合网格。

网格由相互支撑的线组成。由这些线绘制的每个矩形形式不可避免地共享一条公共(public)水平线和垂直线。

Flexbox 是另一种选择，但您必须为容器设置高度，以便列用 flex-direction: column 换行。

如果您有很多元素，并且它们超出了我们已经建立的高度给定的空间，容器就会破裂，剩余的元素会显示在一侧。

这里最好的选择是多列。 Example

缺点:- 我们不能让一个元素跨越超过 1 列。- 元素未水平列出。

对我来说，这是最好的“仅 css”解决方案。

W3C - CSS Multiple Columns