Menu
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 { 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: inline-block; 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 { display: inline-block; 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 { display: inline-block; 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 { display: inline-block; 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%; }<nav id="menu"> <a href="#">Philadelphia</a> <!--<a href="#">Vacation Packages</a>--> <a href="#">United States of America</a> <a href="#">Philippines</a> <a href="#">Long Destinations Names</a> <a href="#">Some Destination</a> <a href="#">Australia</a> </nav>http://jsfiddle.net/cyberjo50/n55xh/3/
Is there a prefix I'm missing to make it work in Safari?
580
Safari versions 9 and up support the current flexbox spec without prefixes. Older Safari versions, however, require -webkit- prefixes. Sometimes min-width and max-width cause alignment problems which can be resolved with flex equivalents. See Flex items not stacking properly in Safari.
Flexbox is very well supported across modern browsers, however there are a few issues that you might run into. In this guide we will look at how well flexbox is supported in browsers, and look at some potential issues, resources and methods for creating workarounds and fallbacks.
flex:1 won't work unless the parent has display:flex . Also, you can't relate the size of one element to another unless they are siblings inside the same parent. The parent has the display:flex. In the class “galeria” and in “vateralink”, too.
Flexbox is a one-dimensional layout method for arranging items in rows or columns. Items flex (expand) to fill additional space or shrink to fit into smaller spaces.
Giving flex a value solved the problem for me, e.g.
flex: 1 0 auto I had to add the webkit prefix for safari (but flex not flexbox):
display:-webkit-flex
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
