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之弹性布局的更多相关文章

  1. css3 FlexBox 弹性布局

    Flex 弹性布局 这个是css3中新添加的内容,现在已经支持所有的浏览器,利用Flex布局,可以简便.完整.响应式地实现各种页面布局. 注意:在设置 flex 后,子元素的flaot ,clear, ...

  2. CSS3 flexbox弹性布局实例

    常用例子 1.居中对齐 <!DOCTYPE html> <head> <meta charset="utf-8"> <style type ...

  3. CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

  4. CSS3支持box-flex弹性布局

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...

  5. 两点补充——CSS3新属性以及弹性布局

    CSS3 新属性 一.[ CSS3新增属性前缀 ] 1.-webkit-:chrome/safari 2.-moz-:火狐 3.-mo-:IE 4.-o-: Opera 欧朋 二 .[CSS 长度单位 ...

  6. CSS3动画属性和flex弹性布局各个属性

    [CSS3动画的使用] 1.声明一个关键帧(动画): @keynames name{ from{} to{} } 每个阶段的写法: ①可以直接使用from-to的写法 ②可以设置0%-100%的写法, ...

  7. 【repost】CSS3弹性布局

    本文导读:在CSS 3中,CSS Flexible Box模块为一个非常重要的模块,该模块用于以非常灵活的方式实现页面布局处理.使用CSS Flexible Box模块中定义的弹性盒布局技术,可以根据 ...

  8. CSS3：布局display属性的flex（弹性布局）

    CSS3:布局display属性的flex(弹性布局) 一.简介 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.设为Flex布局以后, ...

  9. CSS3中的Flexbox弹性布局（一）

    CSS3引入了一种新的布局模式——Flexbox布局,即伸缩布局盒模型(Flexible Box),用来提供一个更加有效的方式制定.调整和分布一个容器里项目布局,即使它们的大小是未知或者动态的,这里简 ...

随机推荐

  1. flash bulider 无法启动

    更新airsdk后无法启动,google下http://www.25kx.com/art/1826181有n种方法,怀疑是.metadata目录原因,可能是旧版的airsdk和新版的airsdk在.m ...

  2. java和C++在多态实现上的区别

    1:java中没有虚函数的概念,但是有抽 象函数的概念,用abstract关键字表示,java中抽象函数必须在抽象类中,而且抽象 函数不能有函数体,抽象类不能被实例化,只能由其子类实现抽象函数,如果某 ...

  3. 黄聪：Xmind修改默认字体风格设置

    Xmind是一款非常好用的思维导图软件,但默认字体使用宋体不够好看,软件本身不支持设置默认字体,但通过修改配置文件达到配置默认字体的目的 默认控制风格的配置文件位置 XMind\plugins\org ...

  4. PLSQL_闪回操作1_Flashback Query

    2014-07-02 Created By BaoXinjian

  5. async callback z

    public class StackOverflow_5979252 { [ServiceContract(Name = "IMessageCallback")] public i ...

  6. 程序员遇到Bug时的30个反应

    开发应用程序是一个非常有压力的工作.没有人是完美的,因此在这个行业中,代码中出现bug是相当普遍的现象.面对bug,一些程序员会生气,会沮丧,会心烦意乱,甚至会灰心丧气,而另一些程序员会依然保持冷静沉 ...

  7. 已知ip地址和其子网掩码如何求网络号子网号主机号

    已知ip地址为10.130.89.95,其子网掩码为255.255.255.224,求其网络号.子网号和主机号. 要看子网掩码变长在第几节,255.255.255.224是在第四节借了位 把224转换 ...

  8. 三种主流的WebService实现方案（REST/SOAP/XML-RPC）简述及比较

    目前知道的三种主流的Web服务实现方案为:REST:表象化状态转变 (软件架构风格)SOAP:简单对象访问协议 XML-RPC:远程过程调用协议 简单介绍: REST:表征状态转移(Represent ...

  9. ORA-30036

    http://blog.sina.com.cn/s/blog_676255e101018d5s.html

  10. 20145305《JAVA程序设计》课程总结

    每周读书笔记链接汇总 问卷调查 第0周学习心得 第1周学习总结 第2周学习总结 第3周学习总结 第4周学习总结 第5周学习总结 第6周学习总结 第7周学习总结 第8周学习总结 第9周学习总结 第10周 ...