甚至分发固定大小的 div

Question

我遇到了几个类似的问题，但答案对我不起作用。

我有几个 div，每个 div 的宽度固定为 210 像素。

他们所在的容器可以根据用户的屏幕大小调整大小。 div 必须始终水平均匀分布，如果没有空格，也应该将 div 行分成另一行。

要更清楚，请参阅下图。

这个JS fiddle已经达到了我想要的结果。但是我看不到它对我的 div 的工作方式，它必须具有固定的宽度。

width: calc(100% / 6);

编辑：

JS Fiddle 的问题是，当屏幕大小是它有空间的地方，但没有足够的空间容纳另一个 div 时。在这种情况下，最后一个 div 应该更靠近右侧。

Answer 1

Flexbox 可以通过将justify-content 设置为space-around（或space-between，取决于您的演示需求）来做您想做的事情。这是一个简单的例子：

body{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-around;
  margin:0;
  padding:5px;
}
div{
  background:#000;
  flex:0 0 210px;
  height:210px;
  margin:5px;
  width:210px;
}

<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

查看caniuse.com 了解有关浏览器支持和前缀的详细信息。

Answer 2

http://kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox

所以这里有一篇文章解释了如何在不使用 Flexbox 的情况下实现可视化布局（它带有很多错误，您必须深入研究才能使其在浏览器中始终如一地工作 - 如果您不使用，浏览器支持会变得更糟修改它上面的语法，所以让我们假设：“没有 Flexbox！”）。

如果没有 Flexbox，您手头的问题的解决方案将非常简单：

.container {
  padding: y%; /* by giving the container a percentage based padding, you will create a slowly upscaling container as screen-width increases */
}

.box {
  width: 210px; /* whyever they need a fixed width but ok, who knows */
  margin-right: x%; /* x should be replaced with a value that distributes your containers evenly across the screen and makes them wrap when needed. Fiddle with the value until it makes sense to you. */
}

这能解决问题吗？

Answer 3

如果我指的是屏幕截图和每个人的想法，flexbox 可以为您提供帮助（我期待我的 cmets 反馈实际上是关于 http://jsfiddle.net/bvgn46hu/108/ 和 http://jsfiddle.net/bvgn46hu/114/）

#container {
  margin:1em;
  color:turquoise;
  display:flex;
  flex-wrap:wrap;
  border: solid;
  padding:2vh;
  align-items:center;
  justify-content:space-between;
}
#container > div:before {
  content:'boxe ';
  padding-right:0.25em;;
}
#container > div {
  display:flex;
  
  align-items:center;
  justify-content:center;
  min-height:25vh;
  border: solid;
  margin:1vh 0;
  width:400px;
  min-width:calc(100vw  / 4);
  max-width: 45%;
  
}

<div id="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

codepen to play with