旧版flexbox局部填坑
本来昨晚要写一篇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局部填坑的更多相关文章
- Android Studio 3.0正式版填坑之路
原文:https://www.jianshu.com/p/9b25087a5d7d Android Studio 3.0启动图 序言 总看别人的文章,今天尝试着自己来写一篇.在逛论坛时候,无意间发 ...
- ubuntu 14.04中安装 ruby on rails 环境（填坑版） 呕血推荐
环境:在win7 上Vmware虚拟机环境中安装的ubuntu 14.04 开发相关: ruby 2.2.0 rails 4.2.0 sublime text 3 本文说明:所有的命令均在$ 之后,若 ...
- Cloudera Manager 5.9 和 CDH 5.9 离线安装指南及个人采坑填坑记
公司的CDH早就装好了,一直想自己装一个玩玩,最近组了台电脑,笔记本就淘汰下来了,加上之前的,一共3台,就在X宝上买了CPU和内存升级了下笔记本,就自己组了个集群. 话说,好想去捡垃圾,捡台8核16线 ...
- Android项目开发填坑记-so文件引发的攻坚战
故事的最初 我负责的项目A要求有播放在线视频的功能,当时从别人的聊天记录的一瞥中发现百度有相关的SDK,当时找到的是Baidu-T5Player-SDK-Android-1.4s,项目中Demo的so ...
- H5填坑笔记--持续更新
最近一直在做移动端的页面,发现很多的坑,这里做一下总结,填填坑…… css常见的问题(一) 一.iOS键盘首字母自动大写 IOS的机子,默认英文输入法状态下,首字母是自动大写的,有时候挺烦人的. 在i ...
- Vue2.0 新手完全填坑攻略——从环境搭建到发布
Jinkey原创感谢 showonne.yubang 技术指导Demo 地址:http://demo.jinkey.io/vue2源码:https://github.com/Jinkeycode/vu ...
- https填坑之旅
Boss说,我们买了个权威证书,不如做全站式的https吧,让用户打开主页就能看到受信任的绿标.于是我们就开始了填坑之旅. [只上主域好不好?] 不好...console会报出一大堆warning因为 ...
- （转）Resources和AssetBundle(新旧版)学习
Resources: Resources的缺点:1.与显示Inspector上直接引用相比,Resources使用不方便. 2.不管你Resources上的资源是否调用了,当你发布的时候, ...
- Vue3+Typescript+Node.js实现微信端公众号H5支付(JSAPI v3)教程--各种填坑
----微信支付文档,不得不说,挺乱!(吐槽截止) 功能背景 微信公众号中,点击菜单或者扫码,打开公众号中的H5页面,进行支付. 一.技术栈 前端:Vue:3.0.0,typescript:3.9.3 ...
随机推荐
- IDE使用GIT控制项目版本
IDEA本身继承GIT开发插件.只需要安装windows git客户端即可使用. check in project 检入项目 将新创建的项目上传到服务器. 对于git来说,空的目录不会上传到远程仓库. ...
- Windows 切换 working directory
用函数 _chdir() 例如用计划任务启动,pwd 是 system32 使用相对路径的地方会出错. 在 main 函数刚启动的时候转换一下 working directory 可解.
- 曹工力荐：调试 jdk 中 rt.jar 包部分的源码（可自由增加注释，修改代码并debug）
背景 大家知道,jdk安装的目录下,一般会有个src.zip包,这个包基本对应了rt.jar这个包.rt.jar这个包里面,就放了jdk中,jdk采用java实现的那部分类库代码,比如java.lan ...
- Eclipse新建类的时候如何自动添加注释（作者，时间，版本等信息）
为什么80%的码农都做不了架构师?>>> 方法一:Eclipse中设置在创建新类时自动生成注释 windows–>preference Java–>Code Sty ...
- ROC-RK3328-CC开源主板运行LibreELEC系统
LibreELEC是运行Kodi媒体中心的轻量级操作系统,基于Linux内核发行,系统为适配Kodi运行环境,做了许多优化和精简,运行速度快,操作简单.是一款很优秀的多功能播放器操作系统. ROC-R ...
- Chrome最新版如何安装Proxy SwitchyOmega
由于Chrome的代理设置与windows10的1703及以后的版本不兼容,导致无法使用代理功能,给工作带来了很大的不便.最近发现一款不错的Chrome代理插件Proxy SwitchyOmega,由 ...
- linux多线程同步的四种方式
1. 在并发情况下,指令执行的先后顺序由内核决定.同一个线程内部,指令按照先后顺序执行,但不同线程之间的指令很难说清楚是哪一个先执行.如果运行的结果依赖于多线程执行的顺序,那么就会形成竞争条件,每次运 ...
- 如何使用badboy录制一个脚本并成功的导入jmeter中？
前言: 虽然,很多人已经不适用这种方式进行录制脚本了,因为不好维护.但是,还是有一些朋友在刚开始学习的过程中使用badboy. 可能有人会好奇了,人家五一都出去玩了,你在家学习吗?正巧前一阵有粉丝留言 ...
- 题解 CF545A 【Toy Cars】
题目传送门 太弱了,只能写写A题的题解 题意 给你一个 $n·n$ 的矩阵,翻车分三种情况: 如果 $a_i,_j=1$ ,记录第 $i$ 辆车 如果 $a_i,_j=2$ ,记录第 $j$ 辆车 如 ...
- HTTP请求头中的X-Forwarded-For介绍
概述 我们在做nginx方向代理的时候,为了记录整个代理过程,我们往往会在配置文件中加上如下配置: location ^~ /app/download/ { ... proxy_set_header ...