Flexbox支持Safari

Question

我有以下Flexbox代码,它在Chrome和Firefox中运行良好,但在Safari(任何版本)中都没有效果.我尝试过特定的前缀但无法实现相同的简单顺序.我应该为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

Safari 5(Safari的最新Windows版本)仅支持具有旧语法和-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中(或不支持时)则使用网格完成