本来昨晚要写一篇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. strpos的坑

    $a = 'abcd'; $c = 'a'; echo strpos($a,$c)!==false ? '原来是兄弟' : '非我族类,砍ta';

  2. eclipse 创建maven项目失败

    问题描述: eclipse 初次创建maven项目报错 可能是maven-archetype-quickstart:1.1.jar 包失效了或者没有? 有人说把这个jar包放在maven本地仓库里 我 ...

  3. 二、Vue基础语法

    六:Vue的v-bind指令作用:绑定标签上的所有属性其简写 ":" 6.1:    例如:<p v-bind:id="test">Hello wo ...

  4. 4.pickling 和unpickling是什么？

    pickling 和unpickling是什么? Pickle module accepts any Python object and converts it into a string repre ...

  5. mac OS 配置 svn服务器端

    在Windows环境下 一般使用Tortoise SVN来搭建svn环境 操作系统 mac OS High Sierra 10.13.6 在Mac环境下 由于Mac自带了svn的服务器端和客户端功能 ...

  6. servlet温故知新

    重新学习了一遍servlet-api的文档,做一些记录. 有道云的笔记直接复制到博客上格式会乱,因此直接放上有道云的链接:http://note.youdao.com/noteshare?id=915 ...

  7. pfSense®2.4.4发布后，原pfSense 黄金会员的服务将免费使用！

    2018年7月16日,Doug McIntire 从即将发布的pfSense®2.4.4开始,之前在"pfSense Gold"下提供的所有服务都将继续,但所有pfSense用户都 ...

  8. CreateDIBSection和位图结构

    2019独角兽企业重金招聘Python工程师标准>>> 理解分辨率 我们常说的屏幕分辨率为640×480,刷新频率为70Hz,意思是说每行要扫描640个象素,一共有480行,每秒重复 ...

  9. Heartbeat+Haproxy实现负载均衡高可用

    环境说明: 主机名 角色 IP地址 mylinux1.contoso.com heartbeat+haproxy eth0:192.168.100.121 eth1:172.16.100.121 my ...

  10. 信息竞赛进阶指南--区间最值问题的ST算法

    void ST_prework() { for (int i = 1; i <= n; i++) f[i][0] = a[i]; int t = log(n) / log(2) + 1; for ...