'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?

Solution 1:^[1]

Giving flex a value solved the problem for me, e.g.

flex: 1 0 auto

Solution 2:^[2]

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

display:-webkit-flex

Solution 3:^[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

Solution 4:^[4]

Try this:

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

Solution 5:^[5]

Just try -webkit-flexbox. it's working for safari. webkit-flex safari will not taking.

Solution 6:^[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%;
}

Solution 7:^[7]

Maybe this would be useful

-webkit-justify-content: space-around;

Solution 8:^[8]

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>

Solution 9:^[9]

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.

Solution 10:^[10]

I had exactly the same issue and tried almost all of the above solution. Finally I tested with 3 simple Div and saw that it works without any problems. So I concluded that there must be a problem with my child's elements and change display type to block and the problem was solved.

.parent {
  display: flex;
}
    
.child {
  display: block;
}

Solution 11:^[11]

Use Autoprefixer, try this:

display: -webkit-box;
    display: -ms-flexbox;
    display: flex;        
    -webkit-box-pack: center;        
        -ms-flex-pack: center;        
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

And also remove the #ffffff from the code, here is the image pls check this

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Dharman
Solution 2	tslater
Solution 3	Anisha
Solution 4	Nisse EngstrÃ¶m
Solution 5	Pranab
Solution 6	Nisse EngstrÃ¶m
Solution 7	Soko?ow
Solution 8	Nisse EngstrÃ¶m
Solution 9	J. Unkrass
Solution 10	mahmood beheshti
Solution 11	Jose Lora

'How do I make flex box work in safari?

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]

Solution 10:[10]

Solution 11:[11]