css - 为什么 flexbox 代码在 Safari 5 和 6 中不起作用？

Question

我使用 flexbox 和 autoprefixer 来对齐 this website 上的很多东西.

现在，尽管我使用了 autoprefixer，我的客户还是向我发送了其中一个部分的以下屏幕截图:

如您所见，图像未在圆心对齐。在所有最新的浏览器(包括 IE 10+)中情况并非如此。

根据我在访问多个 SO 线程后收集到的信息，即使是 Safari 5+ 也支持带前缀的 flex。所以我不知道为什么我的 flex 代码不起作用。

HTML:

<figure class="focus-point" data-animation="fadeInUp" data-animation-delay="0.2">
    <a href="">
        <img src="images/focus-feature-points/2.jpg" alt="focus point">
    </a>
    <figcaption>
        <h3>Engaging Educational Games</h3>
    </figcaption>
</figure>

<a> 的 CSS标签如下:

.focus-point > a {
    overflow: hidden;
    position: relative;
    border-radius: 50%;
    border: 3px solid;
    display: inline-block;
    height: 260px;
    width: 260px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    -webkit-transition: all .3s;
    transition: all .3s;
}

我的客户端使用的 Safari 版本是 5.1.10。

为什么尽管我使用了前缀代码，但我的 flexbox 代码仍然不起作用？

我也知道一些高级的 flexbox 属性在部分支持 flexbox 的旧浏览器中可能会有问题(例如 flex-wrap )，但是正如你所看到的，我在我的这个例子中只使用了最基本的 flexbox 属性.

我做错了什么？

Answer 1

6.1 之前的 Safari 版本支持 previous version of the flexbox specification (source)。

对于Safari 5.0、5.1和6.0，除了display: -webkit-box(也就是那个时候的display: flex)，还需要使用-webkit-box-orient 属性。

这告诉 flex 容器如何对齐它的子容器。

初始值为inline-axis。尝试使用 vertical 或 horizo​​ntal。

这是规范中包含详细信息的部分: https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/#orientation

此处有更多详细信息:Flexbox code working on all browsers except Safari. Why?