Wie mache ich Flex Box in Safari arbeiten?

Question

Wie mache ich Flex Box in Safari arbeiten? Ich habe ein reaktives nav, das eine css flex box benutzt, um ansprechbar zu sein und aus irgendeinem Grund wird es nicht in Safari funktionieren.

Hier ist meine CSS:

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

mein Code ist hier: http://jsfiddle.net/cyberjo50/n55xh/3/

Gibt es ein Präfix ich vermisst habe, um es in Safari funktioniert?

Answer 1

Ich hatte das Webkit-Präfix für Safari hinzufügen (aber flex nicht Flexbox):

display:-webkit-flex

Answer 2

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

Answer 3

Vielleicht wäre dies

-webkit-justify-content: space-around; 

Answer 4

nur nützlich sein, versuchen dies

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 */ 

dies für mich gearbeitet

Answer 5

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

Safari benötigen noch

.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>

die -webkit- Präfix s Flexbox

Answer 6

zu verwenden ich t funktioniert, wenn Sie den Anzeigewert Ihrer Menüpunkte display: inline-block;-display: block;

Ihre aktualisierten Code hier ein:

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