css中心浮动div水平

Question

无论页面宽度和每行的 div 数量如何，我都希望我的页面居中浮动 div。

如果页面适合每行三个 div，并且我有四个 div，我希望第四个 div 在第一个 div 之下。如果用户使窗口更宽，则第四个 div 向上移动到第一行：

[ [div1]  [div2]  [div3]  [div4] ]


[ [div1]  [div2]  [div3] ]
[ [div4]                 ]


[  [div1]  [div2]  ]
[  [div3]  [div4]  ]

我尝试制作容器 div text-align:center 和 content divs inline-block 但这会使最后一行中的 div 像这样居中：

[ [div1]  [div2]  [div3] ]
[         [div4]         ]

这是我的代码：https://jsfiddle.net/g8L1ovj0/

Answer 1

flexbox 可以做到这一点

.container {
  width: 80%;
  border: 1px solid grey;
  margin: 25px auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.box {
  height: 150px;
  width: 150px;
  background: #000;
  flex: 0 0 auto;
  margin: 1px;
}

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Codepen Demo