本来昨晚要写一篇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. javascript-如何获取标签的内容

    <input>标签的: document.getElementById("id").value ; 其他文本标签的: document.getElementById(& ...

  2. thinkphp5和nginx不得不说的故事

    由于之前学习用的都是apsche,所以对ngnix一窍不通,在这里写给正在学习的同行,希望可以帮助到你们: 如果你不会用apache部署tp5的可以查看我之前发布的文章,里面有提到 phpstudy ...

  3. 让Vagrant在Windwos下支持使用NFS/SMB共享文件夹从而解决目录共享IO缓慢的问题

    此问题是在拥有相同配置的环境中,项目在win10跑的慢而在win7就正常的情况下发现的,一步步调试之后发现是文件操作的相关行为变的很慢,于是考虑到可能是系统问题,后来在如下链接找到了解决办法:http ...

  4. JDK11的重要新特性

    文章目录 JDK11发布啦 Oracle不再提供JRE和Server JRE下载 删除部署工具 JavaFX不再包含在JDK中 删除Java EE和CORBA模块 JDK11发布啦 JDK11 在20 ...

  5. 命令替换、权限、chmod、特殊权限

    命令替换 把字符串里面的命令先执行再把该字符串输出,与PHP的""里面的变量被执行一样. $(COMMAND) `COMMAND` [root@jiakang ~]# echo & ...

  6. Mockjs+Ajax实践

    需要完成的工作:利用mock js随机生成数据,通过ajax请求,获取这些数据并展示在网页中. 一 mock js随机生成数据 官方文档中,Mock.mock( ),可以说是mock的精髓所在. Mo ...

  7. 个人博客开发系列：Vue.js + Koa.js项目中使用JWT认证

    前言 JWT(JSON Web Token),是为了在网络环境间传递声明而执行的一种基于JSON的开放标准(RFC 7519). 更多的介绍和说明,以及各种原理,我在此就不多赘诉了.JWT不是一个新鲜 ...

  8. CodeForces 1058C C. Vasya and Golden Ticket

    C. Vasya and Golden Ticket time limit per test1 second memory limit per test256 megabytes inputstand ...

  9. P1460 健康的荷斯坦奶牛 Healthy Holsteins （简单的dfs）

    题目描述 农民JOHN以拥有世界上最健康的奶牛为傲.他知道每种饲料中所包含的牛所需的最低的维他命量是多少.请你帮助农夫喂养他的牛,以保持它们的健康,使喂给牛的饲料的种数最少. 给出牛所需的最低的维他命 ...

  10. 10.秋招复习简单整理之CSMA/CD协议

    我们知道,总线上只要有一台计算机在发送数据,总线的传输资源就被占用.因此,在同一时间只能允许一台计算机发送数据,否则各计算机之间就会相互干扰,使得所发送的数据被破坏.因此,如何协调总线上各计算机的工作 ...