javascript - 均匀间隔的响应式瓷砖网格 - 纯 css 有可能吗？

Question

我有一个网格，里面有方框，每个方框大小相同，标记也相同。

我想做的是让方框填满页面的整个宽度，并且它们之间的间隙均匀。这个想法是，如果浏览器窗口移动，盒子元素将重新堆叠。

我研究了各种方法来实现这一点，包括使用 bootstrap 3 中的网格系统，以及 HERE 中的网格系统。

我也研究过使用 JS 插件，比如 Masonry，尽管这似乎有点过分，因为所有的瓷砖尺寸都相同。

目前我几乎可以在这里工作:http://jsfiddle.net/3xshcn7p/

当前方法的唯一问题是，如果浏览器窗口小于 719 像素但大于 481 像素，它将只显示其中的 2 个框，并在右侧留下一大块空白。

当屏幕不够大以容纳每行上的下一个框数时，所有框之间都会出现同样的问题。

是否可以纯粹使用 css 或必须使用 js 来实现？

Answer 1

您可以使用flexbox 方法来解决这个问题。

justify-content: space-around 如果布局的所有元素周围需要均匀的空间，则使用。

justify-content: space-between 需要在布局的元素之间均匀间隔。

body {
  box-sizing: border-box;
  height: 100%;
  background: #336633;
}
.wrapper {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}
.box {
  width: 200px;
  height: 250px;
  background: white;
  float: left;
  margin: 20px;
}

<div class="wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
<!--wrapper-->