Flexbox support for Safari - html

Question

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>

Answer 1

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

Answer 2

You need to add a webkit prefix for display:
display: -webkit-flex;
https://css-tricks.com/using-flexbox/
http://caniuse.com/#feat=flexbox