How do I make flex box work in safari?

问题:

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?

回答1:

I had to add the webkit prefix for safari (but flex not flexbox):

display:-webkit-flex

回答2:

Try this:

select {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -ms-flexbox;
}

回答3:

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

回答4:

Maybe this would be useful

-webkit-justify-content: space-around;

回答5:

Demo -> https://jsfiddle.net/xdsuozxf/

Safari still requires the -webkit- prefix to use flexbox.

.row{
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.col {
    background:red;
    border:1px solid black;

    -webkit-flex: 1 ;-ms-flex: 1 ;flex: 1 ;
}

<div class="wrapper">
      
    <div class="content">
        <div class="row">
            <div class="col medium">
                <div class="box">
                    work on safari browser 
                </div>
            </div>
            <div class="col medium">
                <div class="box">
                    work on safari browser 
                    work on safari browser 
                    work on safari browser 
                    work on safari browser 
                    work on safari browser 
                </div>
            </div>
            <div class="col medium">
                <div class="box">
                    work on safari browser 
                    work on safari browser 
                    work on safari browser 
                    work on safari browser 
                    work on safari browser 
                    work on safari browser  work on safari browser 
                    work on safari browser 
                </div>
            </div>
        </div>   
    </div>
</div>

回答6:

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%;
}