html - grow - ¿Cómo hago que flex box funcione en safari?

flex-shrink

Question

¿Cómo hago que flex box funcione en safari? Tengo un navegador receptivo que usa un cuadro de css flex para ser receptivo y por alguna razón no funcionará en safari.

Aquí está mi 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%;
}

Aquí está mi código: http://jsfiddle.net/cyberjo50/n55xh/3/

¿Hay un prefijo que me falta para que funcione en safari?

Answer 1

Funciona cuando configura el valor de visualización de los elementos del menú desde la display: inline-block; para display: block;

Vea su código actualizado aquí:

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

Answer 2

Tuve que agregar el prefijo webkit para safari (pero no flexbox ):

display:-webkit-flex

Answer 3

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

Answer 4

Tal vez esto sería útil

-webkit-justify-content: space-around;

Answer 5

JUSTO ESTO

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

esto funcionó para mí

Answer 6

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

Safari todavía requiere

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

s el prefijo -webkit- para usar flexbox