start grow end don basis html css safari flexbox

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



flex-shrink (6)

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


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


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

display:-webkit-flex


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


Tal vez esto sería útil

-webkit-justify-content: space-around;


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í


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