How do I make flex box work in safari?

Question

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?

what version of safari are you using? why is it nor working, what is it doing different? the more info you provide the better :) — ithil, Jul 24 '14 at 07:45

score 43 · Answer 1 · edited Dec 15 '19 at 23:42

43

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

flex: 1 0 auto

edited Dec 15 '19 at 23:42

Dharman

30,962
25
85
135

answered Dec 15 '19 at 21:37

huseyin39

1,393
12
18

6

Worked for me in March 2020. – BU0 Mar 15 '20 at 19:49
2

In my case `flex: 0;` was giving 0 height to a `div`. I replaced it to `flex: 0 0 auto` and it worked. I remember this was a known bug, but I didn't find any reference online – Christian Vincenzo Traina Jul 28 '20 at 13:23
This needs to be upvoted more, and be accepted as the answer, as there are tooo many posts proposing irrelevant solutions. October 2020 and this is still a thing. Thank you. – George Marios Oct 01 '20 at 14:17
This is a correct and working fix from Feb' 2021. – Sambuxc Feb 05 '21 at 21:17
1

Working for me - May 2021. – Erwol May 17 '21 at 08:09

score 20 · Answer 2 · answered Feb 13 '15 at 19:20

20

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

display:-webkit-flex

answered Feb 13 '15 at 19:20

tslater

4,362
3
23
27

37

The OP *has* `display: -webkit-flex` already, I don't see how this answers the question. – cimmanon Mar 17 '16 at 03:15
use `-webkit-flexbox` instead of `webkit-flex`. also use default flex. like that `display: flex; display: -webkit-flexbox;` – Pranab Apr 03 '19 at 14:47

score 11 · Answer 3 · answered Nov 08 '16 at 09:08

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

score 7 · Answer 4 · edited Jun 16 '18 at 07:28

7

Try this:

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

edited Jun 16 '18 at 07:28

Nisse Engström

4,738
23
27
42

answered Jul 06 '16 at 11:35

Friend

506
4
10

score 3 · Answer 5 · answered Apr 03 '19 at 14:12

3

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

answered Apr 03 '19 at 14:12

Pranab

305
3
13

This answer is broad and confusing please consider revision. – Joey Phillips Apr 03 '19 at 14:34
1

i mean that safari will taking -webkit-flexbox instead of -webkit-flex. `display: flex; display: -webkit-flexbox;` – Pranab Apr 03 '19 at 14:38
That helps, Thank you. – Joey Phillips Apr 03 '19 at 14:41

score 2 · Answer 6 · edited Jun 16 '18 at 07:44

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

score 0 · Answer 7 · answered Jul 10 '16 at 14:16

0

Maybe this would be useful

-webkit-justify-content: space-around;

answered Jul 10 '16 at 14:16

Sokołow

521
5
18

score 0 · Answer 8 · edited Jun 16 '18 at 07:33

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>

Do you know if that's that still true in 2019? – Matthew S Sep 03 '19 at 23:55 — Matthew S, Sep 03 '19 at 23:55

score 0 · Answer 9 · answered Aug 14 '19 at 06:00

0

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.

answered Aug 14 '19 at 06:00

J. Unkrass

730
5
16

score 0 · Answer 10 · answered Feb 05 '22 at 12:19

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

score 0 · Answer 11 · edited Feb 12 '22 at 10:58

0

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

edited Feb 12 '22 at 10:58

Jose Lora

1,392
4
12
18

answered Feb 05 '22 at 13:06

Md Farid Hossain

1

How do I make flex box work in safari?

11 Answers11

Linked