CSS3之弹性布局
flexbox是CSS3提出的页面布局模块。flexbox可以把列表横向或者纵向排列，并且填满可以延伸到的空间。稍微复杂的布局可以通过嵌套flex container来实现。
利用flexbox可以方便的创建弹性布局，这使得在移动设备上，可以让元素在容器内扩展和收缩，更容易的实现常见布局，如三列布局。
弹性容器和弹性块
一个flex container中包含了left content right三个弹性块。
可以设置display为flex让块变为弹性块。
可以设置flex-flow来确定弹性块的布局方向，设置为row，横向布局，设置为cloumn,纵向布局：
弹性块可以多行或单行排列。可以设置wrap让其多行排列，如图：
横向布局需要指定各块的宽度，可以为固定宽度，如300px,也可设置为比例宽度，如flex:1,含义是占除指定了width之外的剩余空间的N分之一的宽度，N是总份数。
其高度是弹性容器的高度。
如图：
纵向高度是类似的情况。
一个综合例子：
<!DOCTYPE html>
<html>
<head>
<style>
.container{
background:#a1a1a1;
display:flex;
flex-flow:row;
height:500px;
}
.main {
width: 60%; }
.left {
flex: 1;
background:pink;
}
.right {
flex: 2;
background:pink;
}
</style>
</head>
<body> <div class="container">
<nav class="nav left">…</nav> <section class="main">
Winter comes after autumn.It snows heavily here....
</section> <nav class="nav right">…</nav> </div>
</body>
</html>
效果：
浏览器支持：为了更广泛的支持浏览器，需要考虑添加支持老语法版本的flexbox.上述例子在FF23.0.1运行OK。
参考英文文档：http://helephant.com/2013/03/23/css3-flexbox-layout/
CSS3之弹性布局的更多相关文章
- css3 FlexBox 弹性布局
Flex 弹性布局 这个是css3中新添加的内容,现在已经支持所有的浏览器,利用Flex布局,可以简便.完整.响应式地实现各种页面布局. 注意:在设置 flex 后,子元素的flaot ,clear, ...
- CSS3 flexbox弹性布局实例
常用例子 1.居中对齐 <!DOCTYPE html> <head> <meta charset="utf-8"> <style type ...
- CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
- CSS3支持box-flex弹性布局
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...
- 两点补充——CSS3新属性以及弹性布局
CSS3 新属性 一.[ CSS3新增属性前缀 ] 1.-webkit-:chrome/safari 2.-moz-:火狐 3.-mo-:IE 4.-o-: Opera 欧朋 二 .[CSS 长度单位 ...
- CSS3动画属性和flex弹性布局各个属性
[CSS3动画的使用] 1.声明一个关键帧(动画): @keynames name{ from{} to{} } 每个阶段的写法: ①可以直接使用from-to的写法 ②可以设置0%-100%的写法, ...
- 【repost】CSS3弹性布局
本文导读:在CSS 3中,CSS Flexible Box模块为一个非常重要的模块,该模块用于以非常灵活的方式实现页面布局处理.使用CSS Flexible Box模块中定义的弹性盒布局技术,可以根据 ...
- CSS3：布局display属性的flex（弹性布局）
CSS3:布局display属性的flex(弹性布局) 一.简介 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.设为Flex布局以后, ...
- CSS3中的Flexbox弹性布局（一）
CSS3引入了一种新的布局模式——Flexbox布局,即伸缩布局盒模型(Flexible Box),用来提供一个更加有效的方式制定.调整和分布一个容器里项目布局,即使它们的大小是未知或者动态的,这里简 ...
随机推荐
- Scala第二章学习笔记
最基本的练习~: 使用伴生对象: object holder{ class Foo{ private var x = 5} object Foo{def im_in_yr_foo(f: Foo) = ...
- PLSQL_性能优化工具系列05_SQL Trace/Event 10046 Trace
2014-06-25 Created By BaoXinjian
- HDU 3709 Balanced Number (数位DP)
Balanced Number Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65535/65535 K (Java/Others) ...
- 2.Could not open Selected VM debug port (8700). Make sure you do not have another instance of DDMS or of the eclipse plugin running
在eclipse.ini配置文件最后加上:-Djava.net.preferIPv4Stack=true 其他类似
- Linux命令（20）查看当前网速
Linux查看网络即时网速 sar -n DEV 1 100 1代表一秒统计并显示一次 100代表统计一百次 还可以使用ntop工具
- vim 学习日志（1）：剪切，复制，粘贴，删除，撤销
一:光标命令 左h 上j 下k 右l :goto n 表示跳转到文本的第n个字符 :n 表示跳到第n行 nG n为行数,该命令立即使光标跳到指定行:n为空,光标跳到文件最后一行. Ctrl+G ...
- linux命令（4）：top 命令（性能分析工具）
linux 的top命令详解 简介 top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器. top显示系统当前的进程和其他状况,是一个 ...
- Apache2 CGI demo
1. 修改 httpd.conf 配置 <IfModule alias_module> ScriptAlias /cgi-bin/ "/usr/local/apache2/cg ...
- 帝国CMS常见问题记录
1.第一次安装,为什么找不到＂增加信息＂的地方?因为你未增加栏目,请先增加栏目,然后再增加信息(终极栏目下方可增加信息). 2.为什么信息管理的＂信息栏目＂列表不变?缓存问题,解决方法如下两种:1.＂ ...
- Windows 64位下安装Redis详细教程
方法/步骤 在D盘新建文件夹[redis],右键解压Redis ZIP包,把所有文件解压到redis文件夹中.(其他盘符也可以滴^_^) 文件介绍: redis-benchmark.exe ...