本来昨晚要写一篇react的小笔记，恰好同学小聚的时候附近有个ios维修，把我的4s拿去修好，早上用我还是ios5.1系统的4s打开自己的页面，发现flexbox布局的部分是乱的，眼前一黑。

what the hell？！

对了，我的flexbox是用的新语法，网上一查ios6以下只支持旧的flexbox语法，且不支持wrap。啊....好麻烦。。。

然后上网一番折腾，看了好多文章各种实验，一团mess。因为移动端最常用的是flexbox里边元素均等排列，我就先解决这个，最后终于在国内外众多同行的帮助下测试出一个方案：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

     <meta charset="UTF-8">

     <title>Document</title>

     <style>

 .space{

   -ms-flex-pack: space-between;

   -ms-flex-pack: justify/*针对ie10*/

   -webkit-box-pack: justify;

   -webkit-justify-content: space-between;

   justify-content: space-between;

   align-items: center;

   -moz-box-align：center;

   -webkit-box-align:center;

 }

 .flex{

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

 }

 .c{

 width:50px;

 height:50px;

 background-color: red;

   -webkit-box-flex: 0;      /* OLD - iOS 6-, Safari 3.1-6 */

   -moz-box-flex: 0;         /* OLD - Firefox 19- */

                /* For old syntax, otherwise collapses. */

   -webkit-flex: 0 1 auto;          /* Chrome */

   -ms-flex: 0 1 auto;              /* IE 10 */

   flex: 0 1 auto;

 }

     </style>

 </head>

 <body>

     <div class="flex space">

         <div class="flex1 c"></div>

         <div class="flex1 c"></div>

         <div class="flex1 c"></div>

     </div>

 </body>

 </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局部填坑的更多相关文章

  1. Android Studio 3.0正式版填坑之路

    原文:https://www.jianshu.com/p/9b25087a5d7d   Android Studio 3.0启动图 序言 总看别人的文章,今天尝试着自己来写一篇.在逛论坛时候,无意间发 ...

  2. ubuntu 14.04中安装 ruby on rails 环境（填坑版） 呕血推荐

    环境:在win7 上Vmware虚拟机环境中安装的ubuntu 14.04 开发相关: ruby 2.2.0 rails 4.2.0 sublime text 3 本文说明:所有的命令均在$ 之后,若 ...

  3. Cloudera Manager 5.9 和 CDH 5.9 离线安装指南及个人采坑填坑记

    公司的CDH早就装好了,一直想自己装一个玩玩,最近组了台电脑,笔记本就淘汰下来了,加上之前的,一共3台,就在X宝上买了CPU和内存升级了下笔记本,就自己组了个集群. 话说,好想去捡垃圾,捡台8核16线 ...

  4. Android项目开发填坑记-so文件引发的攻坚战

    故事的最初 我负责的项目A要求有播放在线视频的功能,当时从别人的聊天记录的一瞥中发现百度有相关的SDK,当时找到的是Baidu-T5Player-SDK-Android-1.4s,项目中Demo的so ...

  5. H5填坑笔记--持续更新

    最近一直在做移动端的页面,发现很多的坑,这里做一下总结,填填坑…… css常见的问题(一) 一.iOS键盘首字母自动大写 IOS的机子,默认英文输入法状态下,首字母是自动大写的,有时候挺烦人的. 在i ...

  6. Vue2.0 新手完全填坑攻略——从环境搭建到发布

    Jinkey原创感谢 showonne.yubang 技术指导Demo 地址:http://demo.jinkey.io/vue2源码:https://github.com/Jinkeycode/vu ...

  7. https填坑之旅

    Boss说,我们买了个权威证书,不如做全站式的https吧,让用户打开主页就能看到受信任的绿标.于是我们就开始了填坑之旅. [只上主域好不好?] 不好...console会报出一大堆warning因为 ...

  8. （转）Resources和AssetBundle(新旧版)学习

    Resources:   Resources的缺点:1.与显示Inspector上直接引用相比,Resources使用不方便.     2.不管你Resources上的资源是否调用了,当你发布的时候, ...

  9. Vue3+Typescript+Node.js实现微信端公众号H5支付(JSAPI v3)教程--各种填坑

    ----微信支付文档,不得不说,挺乱!(吐槽截止) 功能背景 微信公众号中,点击菜单或者扫码,打开公众号中的H5页面,进行支付. 一.技术栈 前端:Vue:3.0.0,typescript:3.9.3 ...

随机推荐

  1. 一种特殊的生成器函数-Generator函数

    本节的内容,是建立在iterator遍历器知识的基础上.所以希望还没有看上一节的内容的话,最好还是看一看,当然你如果熟悉iterator就没有那个必要了. 既然你都看到这里来了,就咱们就接着往下讲.. ...

  2. Scrapy模拟登录信息

    携带cookie模拟登录 需要在爬虫里面自定义一个start_requests()的函数 里面的内容: def start_requests(self): cookies = '真实有效的cookie ...

  3. docker-数据管理（3）

    Docker 容器中管理数据主要有两种方式: 数据卷(Data volumes) 数据卷容器(Data volumes containers 数据卷是一个可供一个或者多个容器使用的特殊目录,它绕过UF ...

  4. diskpart 分区，挂载，和移除

    list disk select disk 1 clean Create partition primary size=102400 active format quick list volume a ...

  5. JAVA编程思想 Ch3.5题

    练习5:创建一个class类,包含连两个String字段 :name.says.在main方法中创建两个Dog方法 一个命名为spot 叫声为 Ruff,另一个命民为scruffy,叫声为:Wuff: ...

  6. C++基本知识总结

    从第一个CPP开始写起: "hello,world" #include<iostream> using namespace std;//使用所有命名空间 int mai ...

  7. POJ 1330 Nearest Common Ancestors（裸LCA）

    Nearest Common Ancestors Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 39596   Accept ...

  8. java学习first_day

    java枚举 public class EnumMethodDemo { enum Color {RED, GREEN, BLUE;} enum Size {BIG, MIDDLE, SMALL;} ...

  9. 阿里云服务器连接AWS-S3

    1.找到一个路径下载 aws-cli  (使用离线包安装) wget -P /usr/local/software https://s3.amazonaws.com/aws-cli/awscli-bu ...

  10. OSG程序设计之Hello World1.0

    对于从未接触过OSG的我来说,首先需要一个入门教程.在OSG论坛逛了半天,再加上google,最终决定使用<OSG程序设计>这本书. 下面就贴出书中的第一个例子:Hello World. ...