本来昨晚要写一篇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. deepin下深度终端使用ssh-agent（xshell中的xagent功能）

    背景:从windows10换到deepin后,在连接公司的服务器遇到了问题:windows下用的是xshell,开启xagent后,可直接从公司的跳转板上连接生产服务器:在deepin的深度终端上,从 ...

  2. BareTail 观看文件增加的工具

  3. 点击Qtableview表头，触发事件

    connect(horizontalHeader(), SIGNAL(sectionClicked(int)), this, SLOT(onHeaderClicked(int))); refer to ...

  4. CSS样式3

    1.positon:fixed 可以实现网页浏览器上的返回顶部的功能. positon:fixed 表示将当前div块固定在页面的某一个位置(默认为左上角). <!DOCTYPE html> ...

  5. GitHub 被指审查内容，著名“换脸”开源项目 deepfake 遭限制访问

    开发四年只会写业务代码,分布式高并发都不会还做程序员? >>>   昨天 Hacker News 上一条关于 deepfake 开源项目的帖子(https://news.ycombi ...

  6. 7.JUC线程高级-生产消费问题&虚假唤醒

    描述 生产消费问题在java多线程的学习中是经常遇到的问题 ,多个线程共享通一个资源的时候会出现各种多线程中经常出现的各种问题. 实例说明 三个类:售货员Clerk,工厂Factory,消费者Cons ...

  7. HDU - 1253 胜利大逃亡 （搜索）

    Ignatius被魔王抓走了,有一天魔王出差去了,这可是Ignatius逃亡的好机会. 魔王住在一个城堡里,城堡是一个A*B*C的立方体,可以被表示成A个B*C的矩阵,刚开始Ignatius被关在(0 ...

  8. 经过踩坑，搭建成功的Appium自动化测试环境

    因为最近本人准备搞app自动化,所以就搭建环境过程记录下来(主要踩过好几个坑) 期间有点烦躁,后面调整了下心态还是成功弄好了. 一.Appium环境搭建准备软件 所需要到的软件如下: 1.安装JDK1 ...

  9. 跟哥一起学python（4）- 数据类型之Number

    本节我们开始学习python的数据类型. 什么是数据类型呢?前面我们提过,所谓的编程,就是控制一系列的数据去完成我们预设的逻辑或者功能.所以,编程语言首先要定义一系列对“数据”的处理规则.这些处理规则 ...

  10. MySQL命令2

    索引与外键 // 添加索引 ALTER TABLE orders ADD KEY order_ix_custid(cust_id); // 删除索引 ALTER TABLE orders DROP K ...