html - Flexbox support for Safari -
i have following code flexbox , works in chrome , firefox, it's not effective in safari(any version). have tried specific prefixes couldn't achieve same simple order. should modify/add safari work normal chrome , firefox?
.container { display: -webkit-flexbox; display: flex; flex-flow: row wrap; justify-content: space-around; flex-direction: row; -webkit-flex-direction: row; list-style:none; } li { border:10px salmon solid; padding: 25px 15px; text-align: center; font-size: 1.2em; background: white; -webkit-flex-grow: 3; flex-grow: 3; }<ul class="container"> <li>alabama</li> <li>california</li> <li>florida</li> <li>idaho</li> <li>kansas</li> <li>nevada</li> <li>new york</li> </ul>
safari 5 (the latest windows version of safari) supports flexbox old syntax , -webkit- prefix. (display:-webkit-box)
http://caniuse.com/#search=flexbox
.container { display: -webkit-box; /*safari*/ display: -ms-flexbox; display: flex; flex-flow: row wrap; -webkit-flex-flow: row wrap; /* safari 6.1+ */ justify-content: space-around; flex-direction: row; -webkit-flex-direction: row; list-style:none; } li { border:10px salmon solid; padding: 25px 15px; text-align: center; font-size: 1.2em; background: white; flex-grow: 3; }<ul class="container"> <li>alabama</li> <li>california</li> <li>florida</li> <li>idaho</li> <li>kansas</li> <li>nevada</li> <li>new york</li> </ul>safari 5 not support wrapping, responsiveness won't there. safari 6.1+ support property using -webkit- prefix, it's available mac.
if want responsiveness, try make grid media queries , floats. here's example made:
https://jsfiddle.net/pvlsw09u/2/
.container { list-style:none; width:100%; overflow: hidden; padding:0; background: salmon; /*same color border. better*/ } .container li { box-sizing:border-box; border:10px salmon solid; padding: 25px 15px; text-align: center; font-size: 1.2em; background: white; width:100%; float:left; margin:0; } /*media queries*/ @media (min-width: 480px) { .container li { width: 50%; } } @media (min-width: 640px) { .container li { width: 33%; } } @media (min-width: 768px) { .container li { width: 25%; } } @media (min-width: 1024px) { .container li { width: 20%; } } @media (min-width: 1280px) { .container li { width: 15%; } } @media (min-width: 1824px) { .container li { width: 10%; } } /*etc...*/<ul class="container"> <li>alabama</li> <li>california</li> <li>florida</li> <li>idaho</li> <li>kansas</li> <li>nevada</li> <li>new york</li> <li>alabama</li> <li>california</li> <li>florida</li> <li>idaho</li> <li>kansas</li> <li>nevada</li> <li>new york</li> </ul>it's not perfect flexbox, it's replacement.
the best thing can do, combine flexbox , responsive grid using modernizr. make styles flexbox, when modernizr detects .no-flexbox, can use responsive grid fix (or use grid, , when modernizr detects .flexbox, use flexbox. can choose)
.container { list-style:none; width:100%; overflow: hidden; padding:0; background: salmon; /*same color border. better*/ /*flexbox*/ display: -ms-flexbox; display: flex; flex-flow: row wrap; justify-content: space-around; flex-direction: row; -webkit-flex-direction: row; } .container li { box-sizing:border-box; border:10px salmon solid; padding: 25px 15px; text-align: center; font-size: 1.2em; background: white; margin:0; flex-grow: 3; } .no-flexbox .container li { width:100%; float:left; } /*media queries*/ @media (min-width: 480px) { .no-flexbox .container li { width: 50%; } } @media (min-width: 640px) { .no-flexbox .container li { width: 33%; } } @media (min-width: 768px) { .no-flexbox .container li { width: 25%; } } @media (min-width: 1024px) { .no-flexbox .container li { width: 20%; } } @media (min-width: 1280px) { .no-flexbox .container li { width: 15%; } } @media (min-width: 1824px) { .no-flexbox .container li { width: 10%; } } /*etc...*/<!--make sure include modernizr!--> <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script> <ul class="container"> <li>alabama</li> <li>california</li> <li>florida</li> <li>idaho</li> <li>kansas</li> <li>nevada</li> <li>new york</li> <li>alabama</li> <li>california</li> <li>florida</li> <li>idaho</li> <li>kansas</li> <li>nevada</li> <li>new york</li> </ul>this example works flexbox when it's supported, in safari (or when not supported) it's done grid
Comments
Post a Comment