CSS Flex Box Gallery 问题答案

【问题标题】：CSS Flex Box Gallery IssueCSS Flex Box Gallery 问题
【发布时间】：2018-10-19 12:06:36
【问题描述】：

目前我尝试使用弹性框创建一个“图片库”。这是我目前拥有的：https://jsfiddle.net/neu28Lnc/2/

图像的宽度始终为 50% - 这意味着我将始终有 2 个彼此相邻的图像。页面高度不固定 - 您应该能够滚动/添加更多图像。

我的问题是我想消除这些图像之间的间隙。像这样：https://jsfiddle.net/neu28Lnc/1/（带有边距的硬编码）。

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

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

提前致谢。

Sylz

【问题讨论】：

欢迎来到 StackOverflow！您是否也可以将相关代码放入问题中，而不仅仅是 JSFiddle？这样人们就更容易看到问题。
您需要在两列中更新布局，每列宽度为 50% 或使用砌体。

标签： css image flexbox gallery

【解决方案1】：

您可以使用网格布局来使用砖石。希望对您有所帮助。

.container {
     display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: 20px;
}

.image {
  height: 50px;
  background: #ddd;
}

.image2 {
  height: 150px;
  background: #abc;
}

.image3 {
  height: 180px;
  background: #def;
}

.image4 {
  height: 30px;
  background: #fad;
}

.image5 {
  height: 150px;
  background: #ddd;
}

<div class="container">
  <div class="image img">img1</div>
  <div class="image2 img">img2</div>
  <div class="image3 img">img3</div>
  <div class="image4 img">img4</div>
  <div class="image5 img">img5</div>
  <div class="image img">img1</div>
  <div class="image2 img">img2</div>
  <div class="image3 img">img3</div>
  <div class="image4 img">img4</div>
  <div class="image5 img">img5</div>
</div>

【讨论】：

谢谢 :) 您的代码确实帮助了我，但在重叠图像方面存在一些问题。
图片需要设置max-width: 100%。设置max-width会根据div的大小调整图片大小。

【解决方案2】：

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

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

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

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

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

缺点： - 我们的项目不能超过 1 列。 - 项目未横向列出。

对我来说是最好的“纯 CSS”解决方案。

W3C - CSS Multiple Columns

【讨论】：

多栏为我解决了。真的很容易使用。非常感谢=)