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. -all_load,-ObjC,-force_load三者的区别

    参考:https://developer.apple.com/library/mac/qa/qa1490/_index.html,http://www.cnblogs.com/YouXianMing/ ...

  2. C#笔记一 .Net Framwork

    参考Learning hard本人在博客园的主页: http://www.cnblogs.com/zhili/     以及本书中的一些知识点: http://www.cnblogs.com/zhil ...

  3. hibernateUtils

    hibernate3.x版本 package hibernate_01; import org.hibernate.Session; import org.hibernate.SessionFacto ...

  4. C++命名空间 namespace的作用和使用解析

    一. 为什么需要命名空间(问题提出) 命名空间是ANSIC++引入的可以由用户命名的作用域,用来处理程序中 常见的同名冲突. 在 C语言中定义了3个层次的作用域,即文件(编译单元).函数和复合语句.C ...

  5. ADF_ADF Faces系列1_使用JSF开发基于Ajax的用户界面：ADF Faces 富客户端组件简介（Part1）

    2013-05-01 Created By BaoXinjian

  6. PLSQL_性能优化系列11_Oracle Bulk Collect批处理

    2014-10-04 Created By BaoXinjian

  7. NeHe OpenGL教程 第十八课：二次几何体

    转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...

  8. MHI ,运动历史图像的的获取[下载自CSDN]

    #include "cv.h" #include "highgui.h" #include "stdlib.h" #include &quo ...

  9. [物理学与PDEs]第5章习题参考解答

    [物理学与PDEs]第5章习题1 矩阵的极分解 [物理学与PDEs]第5章习题2 Jacobian 的物质导数 [物理学与PDEs]第5章习题3 第二 Piola 应力张量的对称性 [物理学与PDEs ...

  10. Spring中bean的配置

    先从IOC说起,这个概念其实是从我们平常new一个对象的对立面来说的,我们平常使用对象的时候,一般都是直接使用关键字类new一个对象,那这样有什么坏处呢?其实很显然的,使用new那么就表示当前模块已经 ...