本来昨晚要写一篇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. python学习18类4之静态类

    '''''''''类的静态方法.普通方法.类方法 静态方法: 用 @staticmethod 装饰的不带 self 参数的方法叫做静态方法,类的静态方法可以没有参数,可以直接使用类名调用. 普通方法: ...

  2. SAP采购订单入库后不允许修改单价增强

    需求:在根据采购订单做了入库凭证之后,如果用户反审批采购订单去修改单价,系统提示‘已收货,不允许修改单价’. 判断流程:是否有入库凭证 如果采购订单条件按采购信息记录定价,这个价格本来就不能修改,只能 ...

  3. 小白的MyBatis逆向工程

    MyBatis逆向工程   MyBatis逆向工程,简称MBG.是一个专门为MyBatis框架使用者定制的代码生成器. 可以快速的根据数据库表生成对应的映射文件,接口,以及Bean类对象. 在Myba ...

  4. docker中安装nginx，部署前端代码

    最近在学习docker,初次接触,难免遇到磕磕碰碰,遂将其整理成博客,以便日后查看. 1.拉取nginx镜像 直接从官方镜像库拉取简单粗暴: docker pull nginx 2.运行 docker ...

  5. VS中的生成和重新生成的区别

    2019独角兽企业重金招聘Python工程师标准>>> 生成 在上次编译的基础上,只对改动过的文件重新生成,没有改动过的文件不会重新生成. 重新生成 对所有的文件都重新生成.如果引用 ...

  6. Xapian实战（二）：core concepts

    参考资料 core concepts 正文 1. 并发性 xapian不包含任何全局变量,所以多线程编程中,在没有共享资源的情况下可以安全使用xapian.在实际操作中,由于每个线程都可以创建自己的x ...

  7. 基于opencv的人脸识别程序

    1. 解析opencv自带人脸识别源码(……/opencv-3.1.0/samples/cpp/facedetect.cpp) @ 操作系统:Ubuntu 15.04 OpenCV版本:3.1.0 # ...

  8. 算法竞赛进阶指南--hamilton路径

    // hamilton路径 int f[1 << 20][20]; int hamilton(int n, int weight[20][20]) { memset(f, 0x3f, si ...

  9. POJ 2136 Vertical Histogram（当时写的比较恶心，优化一下）

    Vertical Histogram Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 21223 Accepted: 10048 ...

  10. Python监控文件夹 && 发送邮件

    直接上代码: # python3 # -*- coding: utf-8 -*- # 2017/06/16 by luohan from email.mime.text import MIMEText ...