甚至分配固定大小的div

Question

我经历了几个类似的问题，但答案对我没有用。

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

他们所处的容器可以根据用户的屏幕大小调整大小。 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可以帮助您（我希望从我的评论实际上反馈http://jsfiddle.net/bvgn46hu/108/＆amp; http://jsfiddle.net/bvgn46hu/114/）

＆＃13;

＆＃13;

#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%;
  
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

codepen to play with