Safari 8 Flexbox 浮动和居中

Question

无论我做什么，我似乎都无法让左右浮动的列居中并与其容器的中间对齐。 Flexbox 有没有办法只有左右列，但仍然在中间对齐？它在 Firefox 和 Chrome 上运行良好，但在 Safari 8 上运行良好。

https://jsfiddle.net/vhem8scs/68/

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ccc;
  height: 200px;
  margin-top: 20px;
}

.column:after {
  content: '';
  display: table;
  clear: both;
}

.column div {
  float: left;
}
.column div:last-child {
  float: right;
}

更新

我在容器中添加了以下行。

justify-content: space-between

虽然它与容器的中心/中间对齐，但浮动现在不起作用。

Answer 1

不幸的是，很难想象你想用你的风格来完成什么，但这是我对这个问题的初步分析。

一旦你将一个元素声明为一个弹性容器，所有的子元素都将遵循弹性盒规则。浮动样式基本上会被忽略。因此，您可能想要尝试使用子级的flex-grow、flex-shrink 和flex-basis 属性来确保列位于正确的位置。

如果您的目标是简单地在列之间放置空格，请在父 flex 元素上使用带有 space-around 或 space-between 的 justify-content 属性。

希望这会有所帮助！