How do I make flex boxes work in Safari? I have a responsive nav that uses a CSS flex box to be responsive and for some reason it won't work in Safari.
Here is my code:
#menu {_x000D_
clear: both;_x000D_
height: auto;_x000D_
font-family: Arial, Tahoma, Verdana;_x000D_
font-size: 1em;_x000D_
/*padding:10px;*/_x000D_
margin: 5px;_x000D_
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */_x000D_
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */_x000D_
display: -ms-flexbox; /* TWEENER - IE 10 */_x000D_
display: -webkit-flex; /* NEW - Chrome */_x000D_
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */_x000D_
justify-content: center;_x000D_
-webkit-box-align: center;_x000D_
-webkit-flex-align: center;_x000D_
-ms-flex-align: center;_x000D_
-webkit-align-items: center;_x000D_
align-items: center;fffff_x000D_
font-style: normal;_x000D_
font-weight: 400px;_x000D_
}_x000D_
#menu a:link {_x000D_
display: inline-block;_x000D_
width: 100px;_x000D_
height: 50px;_x000D_
padding: 5px;_x000D_
background-color: yellow;_x000D_
/*border: 1px solid #cccccc;*/_x000D_
margin: 5px;_x000D_
display: flex;_x000D_
flex-grow: 1;_x000D_
align-items: center;_x000D_
text-align: center;_x000D_
justify-content: center;_x000D_
font-weight: bold;_x000D_
color: #1689D6;_x000D_
font-size: 85%;_x000D_
}_x000D_
#menu a:visited {_x000D_
display: inline-block;_x000D_
width: 100px;_x000D_
height: 50px;_x000D_
padding: 5px;_x000D_
background-color: yellow;_x000D_
/*border: 1px solid #cccccc;*/_x000D_
margin: 5px;_x000D_
display: flex;_x000D_
flex-grow: 1;_x000D_
align-items: center;_x000D_
text-align: center;_x000D_
justify-content: center;_x000D_
font-weight: bold;_x000D_
color: #1689D6;_x000D_
font-size: 85%;_x000D_
}_x000D_
#menu a:hover {_x000D_
display: inline-block;_x000D_
color: #fff;_x000D_
width: 100px;_x000D_
height: 50px;_x000D_
padding: 5px;_x000D_
background-color: red;_x000D_
/*border: 1px solid #cccccc;*/_x000D_
margin: 5px;_x000D_
display: flex;_x000D_
flex-grow: 1;_x000D_
align-items: center;_x000D_
text-align: center;_x000D_
justify-content: center;_x000D_
font-weight: bold;_x000D_
font-size: 85%;_x000D_
}_x000D_
#menu a:active {_x000D_
display: inline-block;_x000D_
color: #fff;_x000D_
width: 100px;_x000D_
height: 50px;_x000D_
padding-top: 5px;_x000D_
padding-right: 5px;_x000D_
padding-left: 5px;_x000D_
padding-bottom: 5px;_x000D_
background-color: red;_x000D_
/*border: 1px solid #cccccc;*/_x000D_
margin: 5px;_x000D_
display: flex;_x000D_
flex-grow: 1;_x000D_
align-items: center;_x000D_
text-align: center;_x000D_
justify-content: center;_x000D_
font-style: normal;_x000D_
font-weight: bold;_x000D_
font-size: 85%;_x000D_
}<nav id="menu">_x000D_
<a href="#">Philadelphia</a>_x000D_
<!--<a href="#">Vacation Packages</a>-->_x000D_
<a href="#">United States of America</a>_x000D_
<a href="#">Philippines</a>_x000D_
<a href="#">Long Destinations Names</a>_x000D_
<a href="#">Some Destination</a>_x000D_
<a href="#">Australia</a>_x000D_
</nav>http://jsfiddle.net/cyberjo50/n55xh/3/
Is there a prefix I'm missing to make it work in Safari?
It works when you set the display value of your menu items from display: inline-block; to display: block;
See your updated code here:
#menu {
clear: both;
height: auto;
font-family: Arial, Tahoma, Verdana;
font-size: 1em;
/*padding:10px;*/
margin: 5px;
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
justify-content: center;
-webkit-box-align: center;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;fffff
font-style: normal;
font-weight: 400px;
}
#menu a:link {
display: block; //here you need to change the display property
width: 100px;
height: 50px;
padding: 5px;
background-color: yellow;
/*border: 1px solid #cccccc;*/
margin: 5px;
display: flex;
flex-grow: 1;
align-items: center;
text-align: center;
justify-content: center;
font-weight: bold;
color: #1689D6;
font-size: 85%;
}
#menu a:visited {
//no display property here
width: 100px;
height: 50px;
padding: 5px;
background-color: yellow;
/*border: 1px solid #cccccc;*/
margin: 5px;
display: flex;
flex-grow: 1;
align-items: center;
text-align: center;
justify-content: center;
font-weight: bold;
color: #1689D6;
font-size: 85%;
}
#menu a:hover {
//no display property here
color: #fff;
width: 100px;
height: 50px;
padding: 5px;
background-color: red;
/*border: 1px solid #cccccc;*/
margin: 5px;
display: flex;
flex-grow: 1;
align-items: center;
text-align: center;
justify-content: center;
font-weight: bold;
font-size: 85%;
}
#menu a:active {
//no display property here
color: #fff;
width: 100px;
height: 50px;
padding-top: 5px;
padding-right: 5px;
padding-left: 5px;
padding-bottom: 5px;
background-color: red;
/*border: 1px solid #cccccc;*/
margin: 5px;
display: flex;
flex-grow: 1;
align-items: center;
text-align: center;
justify-content: center;
font-style: normal;
font-weight: bold;
font-size: 85%;
}
Demo -> https://jsfiddle.net/xdsuozxf/
Safari still requires the -webkit- prefix to use flexbox.
.row{_x000D_
box-sizing: border-box;_x000D_
display: -webkit-box;_x000D_
display: -webkit-flex;_x000D_
display: -ms-flexbox;_x000D_
display: flex;_x000D_
-webkit-flex: 0 1 auto;_x000D_
-ms-flex: 0 1 auto;_x000D_
flex: 0 1 auto;_x000D_
-webkit-box-orient: horizontal;_x000D_
-webkit-box-direction: normal;_x000D_
-webkit-flex-direction: row;_x000D_
-ms-flex-direction: row;_x000D_
flex-direction: row;_x000D_
-webkit-flex-wrap: wrap;_x000D_
-ms-flex-wrap: wrap;_x000D_
flex-wrap: wrap;_x000D_
}_x000D_
_x000D_
.col {_x000D_
background:red;_x000D_
border:1px solid black;_x000D_
_x000D_
-webkit-flex: 1 ;-ms-flex: 1 ;flex: 1 ;_x000D_
}<div class="wrapper">_x000D_
_x000D_
<div class="content">_x000D_
<div class="row">_x000D_
<div class="col medium">_x000D_
<div class="box">_x000D_
work on safari browser _x000D_
</div>_x000D_
</div>_x000D_
<div class="col medium">_x000D_
<div class="box">_x000D_
work on safari browser _x000D_
work on safari browser _x000D_
work on safari browser _x000D_
work on safari browser _x000D_
work on safari browser _x000D_
</div>_x000D_
</div>_x000D_
<div class="col medium">_x000D_
<div class="box">_x000D_
work on safari browser _x000D_
work on safari browser _x000D_
work on safari browser _x000D_
work on safari browser _x000D_
work on safari browser _x000D_
work on safari browser work on safari browser _x000D_
work on safari browser _x000D_
</div>_x000D_
</div>_x000D_
</div> _x000D_
</div>_x000D_
</div>Maybe this would be useful
-webkit-justify-content: space-around;
Try this:
select {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -ms-flexbox;
}
Giving flex a value solved the problem for me, e.g.
flex: 1 0 auto
Just tRy this
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
this worked for me
display: flex;
display: -webkit-box;
did it for me. Also there were two display: flex; on the same element from different classes. So I removed the other one.
Just try -webkit-flexbox. it's working for safari.
webkit-flex safari will not taking.
I had to add the webkit prefix for safari (but flex not flexbox):
display:-webkit-flex
Source: Stackoverflow.com