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. [JS]鼠标事件穿透的问题

    今天制作登陆窗口的效果时碰到的一个问题,如下: 标签结构如下: <div id="loginFrame"> <form class="loginFram ...

  2. codeforces 285 D. Permutation Sum 状压 dfs打表

    题意: 如果有2个排列a,b,定义序列c为: c[i] = (a[i] + b[i] - 2) % n + 1 但是,明显c不一定是一个排列 现在,给出排列的长度n (1 <= n <= ...

  3. 大神：python怎么爬取js的页面

    大神:python怎么爬取js的页面 可以试试抓包看看它请求了哪些东西, 很多时候可以绕过网页直接请求后面的API 实在不行就上 selenium (selenium大法好) selenium和pha ...

  4. Mac下finder中无法关闭的小条

    就是这个恶心的小东西,根本无法关闭.其实就是在finder中无意中输入了中文导致的(不是按Alt+F , 就是打开finder然后输入中文) 可以通过继续输入中文然后按esc退出.也可以用下面的设置尽 ...

  5. CentOS配置网卡，重启网络显示：Device does not seem to be present（转载）

    From:http://www.cnblogs.com/fbwfbi/archive/2013/04/29/3050907.html 一.故障现象: [root@c1node01 ~]# servic ...

  6. 采访ServiceStack的项目领导Demis Bellot——第2部分(转)

    ServiceStack是一个开源的.支持.NET与Mono平台的REST Web Services框架.InfoQ有幸与Demis Bellot深入地讨论了这个项目.在这篇两部分报道的第2部分中,我 ...

  7. C++学习6

    类是一种数据类型,它类似于普通的数据类型,但是又有别于普通的数据类型.类这种数据类型是一个包含成员变量和成员函数的一个集合. 类的成员变量和普通变量一样,也有数据类型和名称,占用固定长度的内存空间.但 ...

  8. spring和springmvc之间的整合

    一.springmvc就是运行在spring的环境下,这两者是否需要进行整合,即:是不是要把service .dao . 事务 .和其它框架的整合放在springmvc的配置文件中.这样子在技术层面上 ...

  9. [Java] File文件列表

    package test.file; import java.io.File; import java.io.FilenameFilter; /** * 文件列表,文件过滤 * @author Fro ...

  10. [Flex] ButtonBar系列——flex3 ButtonBar属性labelPlacement标签相对于指定图标的方向

    <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="h ...