甚至分配固定大小的div

Question

我经历了几个类似的问题,但答案对我不起作用.

我有几个div,每个div的固定宽度为210px.

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

要进一步了解更多信息,请参阅下图.

这个JS小提琴取得了我想要的结果.但是我看不出它对我必须有固定宽度的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 。