CSS Flex Box Gallery 问题

Question

目前我正在尝试创建一个 "image gallery" 带有 flex 框。这是我目前拥有的：https://jsfiddle.net/neu28Lnc/2/

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

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

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

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

提前致谢。

西尔兹

Answer 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>

Answer 2

你可以用css网格做点什么，但毕竟css网格当然更适合网格。

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

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

换行

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

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

缺点： - 我们不能让一个项目跨越超过 1 列。 - 项目未水平列出。

对我来说是最好的 "css only" 解决方案。

W3C - CSS Multiple Columns

CSS Flex Box Gallery 问题

CSS Flex Box Gallery Issue

css

image

gallery

flexbox