同时将元素列表居中，并使其左对齐

Question

场景：

• 我有一个我可以居中的内联块元素列表。
• 但是当元素的数量不适合一行时，
  Todo：我想 他们要左对齐。
• 我一直在弄挠盒子 等等，但我似乎一次只能做一个 （将整个元素居中或对齐剩余元素）。

任何人都知道    如何做到这一点？

下面是我一直在使用的jsfiddle，以及一些希望对您有帮助的图像。

我所拥有的：

我想要的东西：

https://jsfiddle.net/bonbonlemon/bu1y93Ls/52/

代码：

jsx：

<div>
  <button onClick={this.handleClick}>Increase!</button>
  <div id="items-box">
    { items.map((item, idx) => (
      <div className="item-box" key={idx}>{item}</div>
    ))}
  </div>
</div>

CSS：

#items-box {
  margin: 50px;
  text-align: center;
}

.item-box {
  display: inline-block;
  height: 100px;
  width: 110px;
  margin-right: 15px;
  margin-top: 20px;
  outline: thin solid black;
}

Answer 1

尝试使用flexbox：

https://jsfiddle.net/hapu8ny2/

html,
body {
   min-height: 100%;
}

#items-box {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap
}

.item-box {
  display: flex;
  min-height: 100px;
  min-width: 110px;
  margin-right: 15px;
  margin-top: 20px;
  outline: thin solid black;
}

注意：请参见我改用min-height和min-width