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. Java的最大优势还是跨平台么？

    之前码农界有码农说Java的最大优势是跨平台,真的是这样么?其实当时网络没这么火爆的时候,确实是这样的,但现在这已然不是了. 跨平台还是Java的最大优势么? 有跨平台需求的仅仅是客户端应用,而不是服 ...

  2. unsigned char 转字符串：

    通常送显示的都是字符串,对于int long float转字符串有对应的函数,还有sprintf进行格式输出,对于嵌入式和单片机大多都用unsigned char型变量,转字符串需要自己编写函数,需要 ...

  3. Mac下的eclipse按住ctrl点击无法查看类文件

    问题主要是项目的.project或者.build文件有问题,github上check的另一个项目就没有这样的现象,可以新建一个项目,然后把新建项目的这两个文件一一替换无法ctrl点击的项目中的文件. ...

  4. java多线程的使用1

    方式1: public class LiftOff implements Runnable { ; ; private final int id = taskCount++; public LiftO ...

  5. 在VMware虚拟机中配置DOS汇编开发环境！！

    操作系统:win7 32位 DOS环境:DosBox  下载:http://www.dosbox.com/ 选择当前适合自己版本,下载就可以了. 汇编编译器:MASM 5.0 下载:http://do ...

  6. ruby-rails 环境搭建

    https://ruby-china.org/wiki/install_ruby_guide

  7. 理解perl的编码转换——utf8以及乱码

    工作需要,闲暇之余,仔细研究了一下脚本乱码的问题 1. vim新建的文件 1)在linux命令行 vim命令建立的文件,如果内容中不出现中文,默认是ASCII.那么用notepad++打开的时候,就是 ...

  8. bitmap size exceeds VM budget

    bitmap size exceeds VM budget we can avoid this error by the following parts:1  its not how much ima ...

  9. 转载：Windows Phone 8.1 投影我的屏幕使用教程

    原文地址:http://livesino.net/archives/6851.live 更新了软件的下载地址. Windows Phone 8.1 新功能投影我的屏幕(Project My Scree ...

  10. awk 解析maps文件中的地址

    maps文件一般是这个样子: pi@raspberrypi:~ $ sudo cat /proc//maps 54b88000-54c8d000 r-xp b3: /lib/systemd/syste ...