将左浮动元素放在页面中心

Question

我有以下示例：https://jsfiddle.net/fbwv8jhp/ 具有以下样式：

.menus {
  height: 200px;
  width: auto;
  margin: auto;
}

.menu{
  width: 200px;
  height: 30px;
  float: left;
  border: 2px solid red;
  margin-left: 10px;
  margin-bottom: 10px;
}

在此，菜单元素向左对齐。但是，额外的期望行为是确保无论屏幕宽度（即每行显示的菜单div的数量）如何，它们都显示在中间。这意味着在每一行中，左菜单和左屏幕边框之间的距离以及右菜单和右屏幕边框之间的距离应该相同，并且所有菜单都应居中。 无法实现，所以也许有人知道如何实现。

在下面的图片中，距离1和2应该相等。

Answer 1

尝试使用CSS flex-box：

heightForRowAtIndexPath