CSS3弹性盒模型flexbox布局基础版
原文链接:http://caibaojian.com/using-flexbox.html
最近看了社区上的一些关于flexbox的很多文章,感觉都没有我这篇文章实在,最重要的兼容性问题好多人都没有提出解决方案。另外本人2014年5月还废寝忘食的翻译了国外的《CSS3弹性盒模型flexbox完整教程》和《CSS3弹性盒模型flexbox布局实例》,这么好的文章没有人来发现,实在是遗憾。
文章写作背景
查询Can I use上的使用情况,发现最新的浏览器基本支持这个属性,IE10开始支持,需要添加-ms前缀。
至于IE10之前的就不考虑了。弹性布局适合于移动前端开发,在Android和ios上也完美支持,所以搞移动的朋友非常有必要认识和使用了。这个属性很久就看到了。一直在考虑到兼容性问题,没有认真深入,后来又发现在现在现代浏览器中也会出现一些诡异的bug,所以又放弃了。
如果考虑到只处理移动方面的,那么兼容性就可以忽略了。
w3c上是这样子定义的:box-flex的值为元素的可伸缩行。柔性是相对的,例如 box-flex 为 2 的子元素两倍于 box-flex 为 1 的子元素。
文章写作目的
Flexbox是一个相当优秀的属性,它可能会成为未来版面布局的一部分。它的语法在过去的几年里发生了很大的变化。但如果我们把旧的,新的和过渡的版本整合在一起,就可以实现更好的支持各种浏览器了。尤其适合简单的,也是最常见使用例子:控制网格。
语法变化的地方
如果你搜索关于Flexbox的相关内容,你会发现许多过时的信息,让我们来看看下面这几种情况:
- 第一种:display:box; 或者是一个属性box-*;那么你看到的是2009年以前的Flexbox。
- 第二种:display:flexbox,或者是一个函数flex(),那么你看到的是2011这个中间版本的Flexbox。
- 第三种:display:flex,或者其他flex-*的属性,那么你看到的是当前的规范(截止本文发表时间)。
过时的例子
- Flexie - a javascript polyfill for Flexbox, uses old 2009 syntax.
- This article by Richard 分享在 Smashing Magazine在2011过渡时间,但它更多的关注是2009以前的语法。
- Stephen Hay写了一系列关于Flexbox的文章,这篇文章介绍2009以前的语法,接着是另外一个2011的另外一篇,很不幸,一个月过后语法又更新了。
查看例子
综合案例
最终的排版显示会是下面这样子的。
需要用到的CSS知识,display,box-flex,flex,box-ordinal-group,flex-order,order,这几个都是css3的关于弹性盒子的新属性。相关属性将在下一篇文章详细讲解,敬请留意。
html代码:
<div class="page-wrap"><section class="main-content" role="main">Main content: first in source order</section><nav class="main-nav" role="navigation">Links</nav><aside class="main-sidebar" role="complementary">Sidebar</aside></div>
CSS代码
//code from http://caibaojian.com/using-flexbox.html .page-wrap {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+ */} .main-content {width: 60%; } .main-nav, .main-sidebar {-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */-moz-box-flex: 1; /* OLD - Firefox 19- */width: 20%; /* For old syntax, otherwise collapses. */-webkit-flex: 1; /* Chrome */-ms-flex: 1; /* IE 10 */flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */ } .main-content {-webkit-box-ordinal-group: 2; /* OLD - iOS 6-, Safari 3.1-6 */-moz-box-ordinal-group: 2; /* OLD - Firefox 19- */-ms-flex-order: 2; /* TWEENER - IE 10 */-webkit-order: 2; /* NEW - Chrome */order: 2; /* NEW, Spec - Opera 12.1, Firefox 20+ */ } .main-nav {-webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -ms-flex-order: 1; -webkit-order: 1; order: 1; } .main-sidebar {-webkit-box-ordinal-group: 3; -moz-box-ordinal-group: 3; -ms-flex-order: 3; -webkit-order: 3; order: 3; }
演示地址
浏览器支持
更多关于flexbox
- CSS3弹性盒模型flexbox布局实例
- CSS3弹性盒模型flexbox完整版教程
参考内容
http://css.doyoe.com/
http://css-tricks.com/using-flexbox/
http://www.w3school.com.cn/cssref/pr_box-flex.asp
转载于:https://www.cnblogs.com/chris-oil/p/5736257.html
CSS3弹性盒模型flexbox布局基础版相关推荐
- CSS3弹性盒模型布局模块介绍
来源:Robert's talk 原文:http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-i ...
- html弹性盒模型,Css3 弹性盒模型
我们来介绍一下Css3 弹性盒模型.Css3引入了新的盒子模型--弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间.这与XUL(火狐使用的用户交互语言)相似,其它语言也使用相 ...
- (转)详解css3弹性盒模型(Flexbox)
今天刚学了css3的弹性盒模型,这是一个可以让你告别浮动.完美实现垂直水平居中的新特性. Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性. Flexbox布局的主体思想是似 ...
- css3弹性盒模型兼容性,彻底弄懂css3的flex弹性盒模型
由于在日常工作中使用css或者bootstrap的栅格系统已经能很好的满足业务需求,所以一直以来对css3的弹性布局不是很感冒. 近日有幸在一篇文章中领略了flex的魅力--简洁优雅.随试之. /*容 ...
- CSS3弹性盒模型之box-orient box-direction
Css3引入了新的盒模型--弹性盒模型,其实上一篇文章已经讲到了一个box-flex,今天来讲讲另外的两个弹性盒模型属性box-orient 和 box-direction. 1.box-origen ...
- 弹性盒模型--新版与旧版比较(2)
弹性空间与元素具体位置设置是加在子元素身上的 <style> body{ margin: 0; } #box{ height: 300px; border: 1px solid #000; ...
- 弹性盒模型--新版与旧版比较(1)
<style> body{ margin:0; } #box{ height:200px; border:1px solid #000; 新版弹性盒模型 /*display:flex;*/ ...
- CSS3——弹性盒模型-flex——等分布局、流式布局、圣杯布局(推荐阅读 很棒)
1.等分布局: 中间固定两边自适应: 固定两个,一个自适应 2.流式布局: 模仿float浮动布局 3.圣杯布局:(自适应布局) 先来看一下结构布局: <div class="wrap ...
- CSS3——弹性盒模型-flex——等分布局、流式布局、圣杯布局
1.等分布局: 中间固定两边自适应: 固定两个,一个自适应 2.流式布局: 模仿float浮动布局 3.圣杯布局:(自适应布局) 先来看一下结构布局: <div class="wrap ...
- css_flex弹性盒模型/flex布局/flex在线可视化工具
文章目录 contents1: content 2: 测试你对flexbox的掌握 flex 模型 flex在线可视化工具(visual guide to css3 flexbox) flex布局 f ...
最新文章
- 重磅!Science 上海交大发布最新“全世界最前沿的125个科学问题”!
- java 039 s rule_Java开发架构篇:DDD模型领域层决策规则树服务设计
- CentOS 6.5系统安装配置图解教程(详细图文)
- 输出torch构建的模型结构
- js(Dom+Bom)第六天(1)
- 1分钟了解协同过滤,pm都懂了
- 雷电交加,雨水倾泻--北京
- datagrip jdbc驱动_datagrip离线安装驱动jar
- 陕西师范大学计算机科学学院保研院校,陕西师范大学计算机科学学院量子信息学保研细则...
- iOS tabbar 图片,最佳大小方式
- org.apache.commons.fileupload.DiskFileUpload1
- 使用python搜索Excel表,查找内容
- 【QT】提示框(消息盒子、文件对话框、颜色对话框、字体对话框、输入对话框、自定义对话框)
- 广域虚拟数据空间中边缘缓存系统的研究与实现
- 啃完这些Java面试题,面试阿里P7稳了
- 用signalr实现简单的网页实时聊天
- 对象存储 OSS 文件下载方法:流式下载和本地下载
- Windows安装lua,并使用SciTE进行编辑
- 【高效程序员系列】2、别做机器人------让工作自动化
- facebook是什么鬼_如果facebook是真正的沉默多数怎么办
热门文章
- ARM DS-5 Flex网络许可证编译错误“Error: C9933W: Waiting for license...”
- 2012-11-26 → 2012-12-02 周总结:项目又有新需求了,很兴奋
- 關于dotNet開發中的框架思考
- matlab xls转csv,使用python或Matlab将csv文件中的数据转换为csv文件
- OpenGL ES 3.0学习实践
- SQlite数据库的C编程接口(七) 数据库锁定(Database Locking) ——《Using SQlite》读书笔记
- Linux内核中的PID散列表实例
- 用python建云盘_超简单!基于Python搭建个人“云盘”
- Linux——常用文件管理命令(必会)
- Redraiment猜想----米勒拉宾+分块打表