Safari 的 Flexbox 支持

Question

我有以下 flexbox 代码，它在 Chrome 和 Firefox 中运行良好，但在 Safari（任何版本）中无效。我尝试了特定的前缀，但无法实现相同的简单顺序。我应该 modify/add 为 Safari 做些什么才能像 Chrome 和 Firefox 一样正常工作？

JSFiddle

.container {
    display: -webkit-flexbox;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    flex-direction: row;
    -webkit-flex-direction: row;
    list-style:none;
}
li {
    border:10px salmon solid;
    padding: 25px 15px;
    text-align: center;
    font-size: 1.2em;
    background: white;
    -webkit-flex-grow: 3;
    flex-grow: 3;
}

<ul class="container">
    <li>Alabama</li>
    <li>California</li>
    <li>Florida</li>
    <li>Idaho</li>
    <li>Kansas</li>
    <li>Nevada</li>
    <li>New York</li>
</ul>

Answer 1

需要添加webkit前缀才能显示：

display: -webkit-flex;

https://css-tricks.com/using-flexbox/

http://caniuse.com/#feat=flexbox

Answer 2

Safari 5（最新的 windows 版本的 safari）仅支持使用旧语法和 -webkit- 前缀的 flexbox。 (display:-webkit-box)

http://caniuse.com/#search=flexbox

.container {
    display: -webkit-box; /*safari*/
    display: -ms-flexbox;
    display: flex;
    flex-flow: row wrap;
    -webkit-flex-flow: row wrap; /* Safari 6.1+ */
    justify-content: space-around;
    flex-direction: row;
    -webkit-flex-direction: row;
    list-style:none;
}
li {
    border:10px salmon solid;
    padding: 25px 15px;
    text-align: center;
    font-size: 1.2em;
    background: white;
    flex-grow: 3;
}

<ul class="container">
    <li>Alabama</li>
    <li>California</li>
    <li>Florida</li>
    <li>Idaho</li>
    <li>Kansas</li>
    <li>Nevada</li>
    <li>New York</li>
</ul>

Safari 5 也不支持换行，所以响应速度也不行。 Safari 6.1+ 确实支持属性使用 -webkit- 前缀，但它仅适用于 mac.

如果你真的想要响应能力，你可以尝试制作一个带有媒体查询和浮动的网格。这是我做的一个例子：

https://jsfiddle.net/pvLsw09u/2/

.container {
    list-style:none;
    width:100%;
    overflow: hidden;
    padding:0;
    background: salmon; /*same color as border. just to look better*/
}

.container li {
    box-sizing:border-box;
    border:10px salmon solid;
    padding: 25px 15px;
    text-align: center;
    font-size: 1.2em;
    background: white;
    width:100%;
    float:left;
    margin:0;
}
/*media queries*/
@media (min-width: 480px)
{
    .container li {
        width: 50%;
    }
}

@media (min-width: 640px)
{
    .container li {
        width: 33%;
    }
}

@media (min-width: 768px)
{
    .container li {
        width: 25%;
    }
}

@media (min-width: 1024px)
{
    .container li {
        width: 20%;
    }
}

@media (min-width: 1280px)
{
    .container li {
        width: 15%;
    }
}

@media (min-width: 1824px)
{
    .container li {
        width: 10%;
    }
}

/*etc...*/

<ul class="container">
    <li>Alabama</li>
    <li>California</li>
    <li>Florida</li>
    <li>Idaho</li>
    <li>Kansas</li>
    <li>Nevada</li>
    <li>New York</li>
    <li>Alabama</li>
    <li>California</li>
    <li>Florida</li>
    <li>Idaho</li>
    <li>Kansas</li>
    <li>Nevada</li>
    <li>New York</li>
</ul>

它不如 flexbox 完美，但它是一个很好的替代品。

你能做的最好的事情就是使用 modernizr 结合 flexbox 和响应式网格。您使用 flexbox 制作样式，但是当 modernizr 检测到 .no-flexbox 时，您可以使用响应式网格作为修复（或者使用网格，当 modernizr 检测到 .flexbox 时，使用 flexbox。您可以选择）

http://jsfiddle.net/msf67Lum/

.container {
    list-style:none;
    width:100%;
    overflow: hidden;
    padding:0;
    background: salmon; /*same color as border. just to look better*/
    /*flexbox*/
    display: -ms-flexbox;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    flex-direction: row;
    -webkit-flex-direction: row;
}

.container li {
    box-sizing:border-box;
    border:10px salmon solid;
    padding: 25px 15px;
    text-align: center;
    font-size: 1.2em;
    background: white;
    margin:0;
    flex-grow: 3;
}

.no-flexbox .container li
{
    width:100%;
    float:left;
}

/*media queries*/
@media (min-width: 480px)
{
    .no-flexbox .container li {
        width: 50%;
    }
}

@media (min-width: 640px)
{
    .no-flexbox .container li {
        width: 33%;
    }
}

@media (min-width: 768px)
{
    .no-flexbox .container li {
        width: 25%;
    }
}

@media (min-width: 1024px)
{
    .no-flexbox .container li {
        width: 20%;
    }
}

@media (min-width: 1280px)
{
    .no-flexbox .container li {
        width: 15%;
    }
}

@media (min-width: 1824px)
{
    .no-flexbox .container li {
        width: 10%;
    }
}

/*etc...*/

<!--make sure to include modernizr!-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>

<ul class="container">
    <li>Alabama</li>
    <li>California</li>
    <li>Florida</li>
    <li>Idaho</li>
    <li>Kansas</li>
    <li>Nevada</li>
    <li>New York</li>
    <li>Alabama</li>
    <li>California</li>
    <li>Florida</li>
    <li>Idaho</li>
    <li>Kansas</li>
    <li>Nevada</li>
    <li>New York</li>
</ul>

此示例在支持时使用 flexbox，但在 safari 中（或不支持时）使用网格完成

Safari 的 Flexbox 支持

Flexbox support for Safari

html

css

flexbox