“老”的Flexbox和“新”的Flexbox
本文由大漠根据Chris Coyier的《“Old” Flexbox and “New” Flexbox》所译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://css-tricks.com/old-flexbox-and-new-flexbox,以及作者相关信息
——作者:Chris Coyier
——译者:大漠
大家都清楚的知道:“Flexbox”(全称:CSS Flexible Box Layout Module)在过去的三年中经历了许多变化。变化都达到了规范以及什么样的浏览器支持Flexbox。
如何辨别
如果你使用google搜索Flexbox,你会发现很多过时的信息。这里将告诉你如何迅速的辨别你需要的信息。
如果你正在查找有关于Flexbox的博客资料,你看到了“display:box;”或者“box-{*}”属性,那么你看的正是2009年版本的Flexbox。
如果你正在查找有关于Flexbox的博客资料,你看到了“display:flexbox;”或者“flex()”函数,那么你看的正是2011年版本的Flexbox。
如果你正在查找有关于Flexbox的博客资料,你看到了“display:flex;”和“flex-{*}”属性,那么你查看的是当前(在写此文时)的规范。
过时的教程与例子
这些东西在创建的时候都非常的棒,但对于现在而言有些过时。
Flexie——一个javascript脚本,使用的是2009年的旧版本语法。
2011年Richard Shepherd在Smashingmagazine.com写了篇文章。文章附带的提到了2011年版本的语法,但更侧重于2009年旧版本的语法。
Stephen Hay早前就写了一篇有关于Flexbox的教程,他的这篇教程介绍的也是2009年老版本语法,随后他对2011版本Flexbox也做了一个跟踪,并且分享了出来。
我第一次接触Flexbox是来自于Paul Irish分享的教程,他使用的是2009年语法版本。顶部介绍了Flexbox的特性,并且链接到Stephen Hay介绍2011年语法版本的文章中。
支持
浏览器支持条款变得有点复杂。
2009年旧版本语法得到浏览器较好的支持:Chrome、Firefox2+、Safari3.1+ ...除IE9和Opera几乎所有浏览器都支持。我所说的“支持”,实际的实现与支持会有点不同(因此,有些需要重写)。
尽管旧的语法得到很好的支持,但使用旧的语法并不是一个聪明的做法。旧的规范始终要淘汰。浏览器在未来有可能还会支持旧的语法。至少,新的语法更容易理解和更深入、更一致的实现效果。浏览器不支持Flexbox新的规范,主要是因为他在CR状态,当他成为规范时,会得到浏览器完美支持。
新版本语法支持的浏览器:Chrome21+、Opera(Opera Mobile12.1+和Blackberry10+)。
在IE10中将运行Flexbox的中间版本(2011年版本):display: flexbox;
DEMO
我最近正帮助别人解决一个创建Fluid-Fixed-Fluid的布局。两个语法都可以轻松的做到这一点。他们都充分的对浏览器做了测试。
译者手语:整个翻译依照原文线路进行,并在翻译过程略加了个人对技术的理解。如果翻译有不对之处,还烦请同行朋友指点。谢谢!
如需转载烦请注明出处:
英文原文:http://css-tricks.com/old-flexbox-and-new-flexbox
中文译文:http://www.w3cplus.com/css3/old-flexbox-and-new-flexbox.html
“老”的Flexbox和“新”的Flexbox的更多相关文章
- 使用Flexbox:新旧语法混用实现最佳浏览器兼容
Flexbox非常的棒,肯定是未来布局的一种主流.在过去的几年这之中,语法改变了不少,这里有一篇“旧”和“新”新的语法区别教程(如果你对英文不太感兴趣,可以移步阅读中文版本).但是,如果我们把Flex ...
- 给萌新的Flexbox简易入门教程
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 原文出处:https://www.sitepoint.com/flexbox-css-flexible-bo ...
- 如何给不支持新特性的浏览器打补丁(让老版本IE兼容新特性)
一个非常棒的 JavaScript 框架叫做 Modernizr(http://www.modernizr. com),用于向缺少 HTML5/CSS3特性支持的浏览器打补丁.由 Alexander ...
- 怎样让老浏览器兼容html5新标签
CSS样式设置默认样式: <style> article, aside, canvas, details, figcaption, figure, footer, header, hgro ...
- 一个完整的Flexbox指南(转载)
本文由大漠根据Chris Coyier的<A Complete Guide to Flexbox>所译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点.如需转载此 ...
- 【原】移动web资源整理
2013年初接触移动端,简单做下总结,首先了解下移动web带来的问题 设备更新换代快——低端机遗留下问题.高端机带来新挑战 浏览器厂商不统一——兼容问题多 网络更复杂——弱网络,页面打开慢 低端机性能 ...
- flex学习小结
接触到flex一个多月了,今天做一个学习小结.如果有知识错误或者意见不同的地方.欢迎交流指教. 画外音:先说一下,我是怎么接触到flex布局的.对于正在学习的童鞋们,我建议大家没事可以逛逛网站,看看人 ...
- 移动web资源整理
[原]移动web资源整理 2013年初接触移动端,简单做下总结,首先了解下移动web带来的问题 设备更新换代快--低端机遗留下问题.高端机带来新挑战 浏览器厂商不统一--兼容问题多 网络更复杂--弱网 ...
- 【原】迎接微信winphone 5.0 版本的IE10样式兼容
微信 Android 5.1 和 iPhone 5.1 已正式发布了,据说本12月底,微信将推出 Winphone 5.0版本,全面支持微信支付,它绑定 IE10 浏览器,那么做微信公众号的 H5 页 ...
随机推荐
- Redis哨兵日常维护
目录 一.日常操作 指定一个从做新主 添加一个从节点 添加一个Setinel节点 一.日常操作 指定一个从做新主 有时候需要将当前主节点机器下线,并指定一个高一些性能的从节点接替 将其它从节点的sla ...
- BUU PWN hitcontraining_bamboobox
本来想学习house of force,结果没用就直接做出来了...我用了三种方法来做这道题. 1.fastbins attack 2.unlink 3.house of force 可以改写got表 ...
- 2019"深思杯"山东省大学生网络安全技能大赛部分wp
签到 载入OD查看字符串 上下左右 这道题出来的时候真的是一点思路都没有,一直以为是什么编码来着,看了大佬们的 wp 原来是画图 拿大佬的脚本: from PIL import Image im = ...
- 联盛德 HLK-W806 (九): 软件SPI和硬件SPI驱动ST7789V液晶LCD
目录 联盛德 HLK-W806 (一): Ubuntu20.04下的开发环境配置, 编译和烧录说明 联盛德 HLK-W806 (二): Win10下的开发环境配置, 编译和烧录说明 联盛德 HLK-W ...
- 预算(Project)
<Project2016 企业项目管理实践>张会斌 董方好 编著 预算是件重要的事,不然银几一花没边了,那结果可是要牺牺的(以下省略具体描述9^323字) 在Project里做预算,步骤不 ...
- Django中提示消息messages的设置
1. 引入messages模块 1 from django.contrib import messages 2. 把messages写入view中 1 @csrf_exempt 2 def searc ...
- 卸载zabbix
1.首先停止zabbix运行 可以用官方命令 systemctl stop zabbix-server zabbix-agent httpd rh-php72-php-fpm 也可以直接kill -9 ...
- 第一周python学习总结
多行注释:格式化输出内容,用{}传递变量内容 执行输出 while: for XXX: if: range(satar,end,步长) break continue input 等于python2里面 ...
- Mybatis-Plus一键生成代码
Mybatis-Plus一键生成代码 一.闲言碎语 闲来无事看了看了MP的官网看到一键生成的代码更新了! 整个Ui风格都变了,遂决定瞅一眼新的代码生成器 官网地址~~ 二.引入依赖 新的代码生成只有在 ...
- Android中Log信息的输出方法
第一步:在对应的mk文件中加入:LOCAL_LDLIBS:= -llog第二步:在要使用LOG的cpp文件中加入:#include <android/log.h>#define LOGD( ...