Flexbox中的等间距图像

时间:2014-09-16 00:37:37

标签: html css

我正在使用一个使用行包布的Flexbox容器。每个项目的大小完全相同(150x267像素)。我为每个项目添加了10px的余量以提供一些空间。

Flexbox在布置项目方面做得非常好,但我试图获得一个布局,这样无论视口宽度如何,每个项目之间的间距都是相同的。有时会出现这种情况,但宽度约为1400px时,图像之间的间隙明显大于行的每一端的10px边距。

我的CSS是

div#imgcontainer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: 0;
}
div#imgcontainer img {
  margin: 10px;
  height: 150px;
}

您可以在3-dot-timb-photos.appspot.com

查看布局示例

0 个答案:

没有答案