flex-direction似乎打破了Safari 10中的水平边距自动

Question

我试图在Safari 10中使用flex-direction列和margin：auto来表示子元素，但水平边距似乎并不适用于其他所有浏览器（Edge，Firefox，Chrome） 。这是一个快速的重复：

http://jsfiddle.net/paostj73/

.center-pls {
  display: flex;
  height: inherit;
  flex-direction: column;
}

.to-center {
  margin: auto;
}

在Safari中看起来像这样：

在Chrome中就像这样：

我知道设置align-items是一种解决方法，但不幸的是，它也恰好打破了我的布局的其他部分。还有其他方法可以解决这个问题吗？这已经是一个已知的问题吗？

Answer 1

这是IE的一个问题，如果我也没有误解Safari，由align-items默认值stretch引起，它将元素拉伸到全宽并且无法应用自动边距

要为除align-items: stretch元素之外的所有项保留默认to-center，请在其规则中添加align-self: center

html, body {
  height: 100%;
  margin: 0;
}

.center-pls {
  display: flex;
  height: inherit;
  flex-direction: column;
}

.to-center {
  margin: auto;
  align-self: center;           /*  added, fix for IE and Safari  */
}

<div class="center-pls">
  <div class="top-nav">
  aaa aaa aa
  </div>
  <div class="to-center">
  aaaa
  </div>
</div>

根据其他元素的呈现方式，将align-items: flex-start设置为center-pls也会有效，但其他元素可能需要width: 100%设置，所以他们拉伸并填充其父级的宽度。

html, body {
  height: 100%;
  margin: 0;
}

.center-pls {
  display: flex;
  height: inherit;
  flex-direction: column;
  align-items: flex-start;      /*  added, fix for IE and Safari  */
}

.to-center {
  margin: auto;
}

<div class="center-pls">
  <div class="top-nav">
  aaa aaa aa
  </div>
  <div class="to-center">
  aaaa
  </div>
</div>