旧版flexbox局部填坑
Posted 瓶子2333
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了旧版flexbox局部填坑相关的知识，希望对你有一定的参考价值。
本来昨晚要写一篇react的小笔记，恰好同学小聚的时候附近有个ios维修，把我的4s拿去修好，早上用我还是ios5.1系统的4s打开自己的页面，发现flexbox布局的部分是乱的，眼前一黑。
what the hell？！
对了，我的flexbox是用的新语法，网上一查ios6以下只支持旧的flexbox语法，且不支持wrap。啊....好麻烦。。。
然后上网一番折腾，看了好多文章各种实验，一团mess。因为移动端最常用的是flexbox里边元素均等排列，我就先解决这个，最后终于在国内外众多同行的帮助下测试出一个方案：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> 5 <meta charset="UTF-8"> 6 <title>Document</title> 7 <style> 8 .space{ 9 -ms-flex-pack: space-between; 10 -ms-flex-pack: justify/*针对ie10*/ 11 -webkit-box-pack: justify; 12 -webkit-justify-content: space-between; 13 justify-content: space-between; 14 align-items: center; 15 -moz-box-align：center; 16 -webkit-box-align:center; 17 } 18 .flex{ 19 display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ 20 display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ 21 display: -ms-flexbox; /* TWEENER - IE 10 */ 22 display: -webkit-flex; /* NEW - Chrome */ 23 display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ 24 } 25 .c{ 26 width:50px; 27 height:50px; 28 background-color: red; 29 -webkit-box-flex: 0; /* OLD - iOS 6-, Safari 3.1-6 */ 30 -moz-box-flex: 0; /* OLD - Firefox 19- */ 31 /* For old syntax, otherwise collapses. */ 32 -webkit-flex: 0 1 auto; /* Chrome */ 33 -ms-flex: 0 1 auto; /* IE 10 */ 34 flex: 0 1 auto; 35 } 36 37 </style> 38 </head> 39 <body> 40 <div class="flex space"> 41 <div class="flex1 c"></div> 42 <div class="flex1 c"></div> 43 <div class="flex1 c"></div> 44 </div> 45 </body> 46 </html>
要注意的是：
flex中子元素的box-flex属性是将子元素定义成可伸缩的对象，也就是会根据容器的大小自动调整尺寸，默认值是0.但是网上几篇文章给的代码属性值是1，我在测试的以为这个是兼容旧语法的trick，理所当然地以为1表示不伸缩时的尺寸，后来一查才发现设置成正整数是相对其他box-flex的等比放大倍数。
如果子元素本身有设置了宽度，width：20%;那行是不需要的。
最后，W3C上说box-align、box-flex这几个css目前没有浏览器支持，只有firefox和chrome等加前缀可以使用......
其实我是有用autoprefixer的，但是今天才发现对于ios6以下的，autoprefixer没有帮我生成出适合的css...
以上是关于旧版flexbox局部填坑的主要内容，如果未能解决你的问题，请参考以下文章
css 粘性页脚片段（来源：treehouse flexbox课程）