For Safari 5 on Windows, the only way to use flexbox is with the old syntax and 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 not support wrapping, limiting responsiveness. Safari 6.1+ on Macs adds this feature using the -webkit- prefix.
If responsiveness is crucial, a grid with media queries and floats provides a suitable alternative. See an example I created here:
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%;
}
}
/* Additional media queries for different screen widths */
/*etc...*/
<ul class="container">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
While not as robust as flexbox, this grid system serves as a viable substitute.
Combining flexbox and the responsive grid using Modernizr is an effective approach. With Modernizr, you can utilize flexbox styles and fallback to the responsive grid when needed.
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%;
}
}
/* Additional media queries for different screen widths */
/*etc...*/
<ul class="container">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
This approach seamlessly transitions between flexbox and the grid based on browser support, ensuring a consistent layout experience.