Reputation: 513

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?

Upvotes: 48

Answers (11)

Md Farid Hossain

Reputation: 1

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

Upvotes: 0

mahmood beheshti

Reputation: 69

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

Upvotes: 0

huseyin39

Reputation: 1403

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

flex: 1 0 auto

Upvotes: 43

J. Unkrass

Reputation: 772

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.

Upvotes: 0

Pranab

Reputation: 305

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

Upvotes: 3

michi-p

Reputation: 261

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

Upvotes: 2

Nikit Barochiya

Reputation: 1091

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>

Upvotes: 0

Friend

Reputation: 516

Try this:

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

Upvotes: 7

Anisha

Reputation: 147

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

Upvotes: 11