一. 背景

网页布局是css的一个重点应用，传统的布局方案，基于盒模型、依赖display属性 + position属性 + float属性。它对于一些特殊布局非常不便，比如多列等高、垂直居中等就非常不容易实现。

传统的css布局方案

二. flexbox是什么

Flex是Flexible Box的缩写，可理解为“弹性伸缩布局”。2009年由w3c提出。它可以简便、响应式地实现各种页面布局，为新时代的页面布局提供了更大的灵活性。

目前的浏览器支持情况：

flexbox兼容性

在flex布局中，里边的属性以及属性值可以结合下图来理解。

Paste_Image.png

flexbox的属性是基于main主轴、cross交叉轴来设计的，
主轴的开始叫main start，结束叫 main end；
交叉轴的开始位置叫cross start，结束位置叫cross end。```

采用flex布局的元素，称为flex容器，容器里包含的元素，称为flex项目。```

2.1 容器的属性（6个）

flex-direction
设置主轴的方向，水平或垂直方向，一般取值：row | column
flex-wrap
定义一行排不下所有项目时，如何显示：nowrap（默认）不换行、wrap换行
flex-flow
flex-direction 和 flex-wrap 的简写，默认值：flex-flow: row nowrap;
justify-content
定义了项目在主轴的对齐方式。取值：flex-start | flex-end | center | space-between | space-around
align-items
定义项目在交叉轴上如何对齐。取值：flex-start | flex-end | baseline | stretch（默认）拉伸，占满整个容器
align-content
定义多根轴线的对齐方式，比较少用。

2.2 项目的属性（6个）

order定义项目的排列顺序，数值越小，越排前面。默认值为 0
flex属性是flex-grow、flex-shrink、flex-basis的简写，默认值为 0 1 auto。
（该属性有两个快捷键：auto（1 1 auto）和 none（0 0 auto）。。。不理解？）
flex-basis定义了在分配多余空间之前，项目占据的主轴空间。默认值为 auto，即项目原本的大小。
flex-grow如果一行当中存在剩余空间，设置项目占据多少比例，默认值为 0
（使用效果比较美妙，可在demo中体会。）
flex-shrink当一行中空间不足，则缩小该项目，此处设置缩小比例，默认值为 1
（当所有项目都为1，空间不足时，全部缩小；当一个项目的flex-shrink为0，其余为1，则空间不足时，前者不缩小。）
align-self设置单个项目和其他项目不一样的对其方式，可覆盖align-items。

三. 应用案例

3.1 水平对齐和垂直对齐的列表

水平对齐 VS 垂直对齐

常见的布局抽象

codepan代码

等高的列表：

Paste_Image.png

3.2 网格布局

html代码：


  ...
  ...
  ...

CSS代码：

.Grid {display: flex;}
.Grid-cell {flex: 1;}

3.3 最常见的圣杯布局

body
  #header
  #left_nav
  #center_content
  #right_sidebar
footer

.HolyGrail {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

header,
footer {
  flex: 1;
}

.HolyGrail-body {
  display: flex;
  flex: 1;
}

.HolyGrail-content {
  flex: 1;
}

.HolyGrail-nav, .HolyGrail-ads {
  /* 两个边栏的宽度设为12em */
  flex: 0 0 12em;
}

.HolyGrail-nav {
  /* 导航放到最左边 */
  order: -1;
}

分栏布局要等高和垂直居中，轻松应对：

3.4 一些长度不明确的表单组件

3.5 图文混排

3.6 固顶的低栏

CSS：

.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
.Site-content {
  flex: 1;
}

3.7 流式布局

CSS:

.parent {
  width: 200px;
  height: 150px;
  background-color: black;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
}

.child {
  box-sizing: border-box;
  background-color: white;
  flex: 0 0 25%;
  height: 50px;
  border: 1px solid red;
}

（完）

参考资料：
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
http://www.w3cplus.com/css3/using-flexbox-today.html
http://www.w3cplus.com/blog/tags/157.html

Flexbox给页面布局带来的新变化