旧版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>

View Code

要注意的是：

flex中子元素的box-flex属性是将子元素定义成可伸缩的对象，也就是会根据容器的大小自动调整尺寸，默认值是0.但是网上几篇文章给的代码属性值是1，我在测试的以为这个是兼容旧语法的trick，理所当然地以为1表示不伸缩时的尺寸，后来一查才发现设置成正整数是相对其他box-flex的等比放大倍数。

如果子元素本身有设置了宽度，width：20%;那行是不需要的。

最后，W3C上说box-align、box-flex这几个css目前没有浏览器支持，只有firefox和chrome等加前缀可以使用......

其实我是有用autoprefixer的，但是今天才发现对于ios6以下的，autoprefixer没有帮我生成出适合的css...