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),用来提供一个更加有效的方式制定.调整和分布一个容器里项目布局,即使它们的大小是未知或者动态的,这里简 ...
随机推荐
- 黄聪：Mysql5.6缓存命中率
MySQL缓存命中率,网上说法不一,下面我说下我的看法,大家轻拍: 总的select查询数等于com_select(没命中) + qcache_hits(命中) + 解析错误的查询. 再来看看Com_ ...
- 黄聪：走进wordpress do_action函数
再看do_action函数.位于plugin.php352行.我把源码放在西街口这里,略去了其它辅助处理的语句. 如下: function do_action($tag, $arg = '') { ...
- 1分钟内检查Linux服务器性能的命令
1.uptime 在Linux系统中,这些数据表示等待CPU资源的进程和阻塞在不可中断IO进程(进程状态为D)的数量. 2.dmesg|tail 命令会输出系统日志的最后10行,这些日志都可以排查性能 ...
- IGS_学习笔记10_IREP监控SOA Integration和日志设定（案例）
20150506 Created By BaoXinjian
- NeHe OpenGL教程 第八课：混合
转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...
- ndk android studio万年坑
先说javah万年坑 javah语法: Usage: javah [options] <classes> where [options] include: -o <file> ...
- gridview转成EXCEL文件保存(多页)
CompositeLink complink = new CompositeLink(new PrintingSystem()); PrintableComponentLink link = new ...
- 织梦后台更新，报错DedeCMS Error:Tag disabled:＂php＂ more...
网站采用织梦v5.7版本,在做过一次后台补丁更新后,再对网站“生成”操作的时候,无厘头出现报错“ 网站后台--系统--系统基本参数---其他选项 ---模板引擎禁用标签:php ,把php删掉 保存 ...
- [ActionScript 3.0] AS 实现JSON转换为XML
package com.fylibs.utils { /** * @author:Frost.Yen * @E-mail:871979853@qq.com * @create:2015-12-25 下 ...
- type和role属性有什么区别呢
type是规定标签的类型,比如<input />标签中使用type="button"就是代表一个按钮 使用type="text" 就是一个文本框,t ...