在 Safari 中显示 Flex 对齐答案

【问题标题】：Display Flex in Safari align在 Safari 中显示 Flex 对齐
【发布时间】：2019-06-15 08:23:38
【问题描述】：

我有 div 块，里面有一个子元素：

.mark__btn {
  width: 19px;
  height: 19px;
  border-radius: 2px;
  cursor: pointer;
  text-align: center;
  opacity: 0.8;
  position: relative;
  margin-right: 3px;
  color: #000;
  display: flex;
  align-items: center;
  align-content: center;
  flex-direction: column;
  justify-content: center;
  align-self: center;
}

.mark__btn span {
  font-size: 14px;
}

<div class="mark__btn">
  <span>+</span>
</div>

所以，我尝试通过水平和垂直对齐中心元素span，它适用于 Chrome，但不适用于 Safari

【问题讨论】：

在 Chrome 和 Safari 中对我来说看起来是一样的……当然只有一个加号挂在空白处。如果有可见边框，它可能看起来会有所不同。

标签： html css safari flexbox

【解决方案1】：

您需要为 Safari 和其他浏览器使用前缀才能使用 display flex

display: -webkit-box; 
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;  // for safari
display: flex;

【讨论】：

我需要为 Sarafi 使用特定的flex-direction 吗？
否 - 一旦你使用了显示的前缀 - 所有的 flex 属性和子属性都应该可用
自 2015 年以来，Safari 不再需要 Flexbox 前缀！