CODEWITHSUNDEEP
htmlcssflexbox
Nima Parsi
Nima Parsi

Reputation: 2110

Flexbox support for Safari

I have the following code for flexbox and it works perfectly in Chrome and Firefox, however it's not effective in Safari(any version). I have tried specific prefixes but couldn't achieve the same simple order. What should I modify/add for Safari so it will work normal like Chrome and 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>

Upvotes: 1

Views: 1600

Answers (2)

JoJo
JoJo

Reputation: 806

Safari 5 (the latest windows version of safari) only supports flexbox with the old syntax and with the -webkit- prefix. (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 does also not support wrapping, so the responsiveness won't be there. safari 6.1+ does support this property using the -webkit- prefix, but it's only available for mac.

If you really want the responsiveness, you could try to make a grid with media queries and floats. here's an example i made:

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>

It's not as perfect as flexbox, but it's a good replacement.

The best thing you can do, is combine flexbox and the responsive grid using modernizr. you make your styles with flexbox, but when modernizr detects .no-flexbox, you can use the responsive grid as a fix (or use the grid, and when modernizr detects .flexbox, use flexbox. you can choose)

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>

this example works with flexbox when it's supported, but in safari (or when not supported) it's done with the grid

Upvotes: 5

MT3
MT3

Reputation: 1063

You need to add a webkit prefix for display:

display: -webkit-flex;

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

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

Upvotes: 0

Related Questions