flexbox 弹性盒布局和布局原理
新版的flexbox规范分两部分：一部分是container，一部分是 items。
flexbox是一整套布局规范，包含了多个css属性，所以学习起来比`float: left;` 这样简单的布局要复杂很多。
基本原理
容器上有 主轴和纵轴的概念，默认主轴（main-axis）是横向，从左到右，纵轴是竖向，从上到下。其中所有的孩子的布局都会受到这两个轴的影响。后面会讲到，有很多相关的css属性就是通过改变主轴和纵轴的方向来实现不同的布局效果的。
div上设置 `display: flex` 或者 `display: inline-flex` 来变成一个flex容器。然后给其中的每一个孩子设置 `flex: [number]` 来让他们按比例分配容器的宽度。
比如三个item分别设置了 `flex: 1` `flex: 2` `flex: 1` 则他们是按照 1-2-1 的比例来分配宽度的。
如果有item没有设置 `flex` 而是设置了宽度，比如 ` 100px` 那么它的宽度就不受flex容器的影响，但是其他的设置了 `flex: [number]` 的容器会按比例平分剩下的部分。即使通过 ` 100px` 的方式定死宽度，除了和 flex: 1 的宽度计算方式不同之外，其他并没有不同。
其实应该说，如果一个孩子没有通过 flex: 1的方式来定义宽度，那么会根据非flex的方式来优先计算它的宽度，然后其他的声明了flex的孩子再按比例分配剩下的宽度。
如下图所示，其中只有第一个孩子声明了 `flex:1` ,后面的都没有申明宽度，那么在flexbox容器中，后面的7个孩子都是由他们中的文字撑开的宽度，剩余的宽度全部分配给第一个孩子。
后面还会仔细讲 `flex: 1` 定义孩子宽度的细节。
container
display
`display: flex` 或者 `display: inline-flex` 来声明一个flexbox容器
flex-direction
items的排列方向，其实就是改变了上面所说的 主轴方向，所以这个属性会其他属性产生影响，因为整个flexbox的布局都是由主轴和纵轴决定的。
row: 从左到右
row-reverse: 从右到左
colum: 从上到下
colum-reverse: 从下到上
下面分别是这四个值的结果
flex-wrap
当内容超出之后是否折行。
nowrap：不换行，而是通过收缩每一个孩子的宽度来挤在一行。
wrap: 换行。
wrap-inverse: 换行，但是折行方向相反，（比如默认是折到下一行，但是这个属性会导致折到上一行）。
如下图所示，分别是上述的三个值的效果，其中每一个孩子宽度为 40px，8个孩子已经超出了容器的 200px宽度。
flex-flow
flex-direction 和 flex-wrap 的组合写法。
justify-content
不知道如何准确翻译 justify 这个词。它的作用是定义了如何分配剩余的空白区域。
flex-start：主轴方向
flex-end: 主轴反方向
center: 挤在中间
space-between: 中间有空白。
space-around: 中间和两边都有空白。其中两侧的空白是中间的一半宽度，可以理解为每个孩子两侧都有相同宽度的空白，并且空白不合并。
上面说过，flex-direction 会改变主轴方向，下面我们看看 flex-direction 为默认情况下（从左到右）这五个不同值的区别：
发现一个bug，在chrome下，在调试器下直接切换space-between space-around 是不生效的。
然后我们设置一下 `flex-direction: column`，会发现他们的主轴已经变成从到上下了：
align-items
孩子的对齐方式，这个比较好理解。就是孩子的对齐方式。
注意，这里的“对齐”指的是纵轴上的对齐方式，所以，这个属性也是受 `flex-direction` 影响的。
比如我有一个高度为100 px的容器，那么默认情况下，是scratch，就是在纵轴上填满容器。
如上图所示，只定义了容器高度，默认情况下孩子的高度就会填满容器。
如果我改成`align-items: flexstart` 就会是这样
align-items 所有属性值如下：
flex-start: 纵轴开始
flex-end: 纵轴结束
center: 纵轴居中
baseline: 纵轴的baseline
scratch: 填满容器。
align-content
当有多行内容的时候，这个属性决定了如何对多行内容进行对齐。
注意，上面的每一个属性都是以每一个item为单位进行布局，而这个属性是以一行为单位进行布局。感觉这个属性应该叫 align-lines 比较合适。
如果只有一行的话，这个属性是不生效的，所以一定要配合 `flex-wrap: wrap` 来使用。
items
order
很简单，排列顺序，没什么好讲的。
flex-grow
定义了主轴上，孩子分配剩余空白区域的比例。
比如现在有三个孩子，宽度是 40px，并且`margin: 2px`，容器宽度 200px，那么默认情况下，有 `(200-44)/3=68` 空白的宽度。
如果你给每个孩子都定义了 `flex-grow: 1`，那么他们平分剩余的空白区域，就是这样：
这时候，如果我给第二个孩子定义 `flex-grow: 2`，那么它的宽度是怎么计算的？
其实就是把 68px 的空白按照`1:1:2` 的比例分配给他们，也就是 `17:17:34` 的大小来分配，所以三个孩子的宽度分别为 `57,57,74`：
如果你给一个孩子设置为 `flex-grow: 0` 那么它不会参与剩余空白的分配。
flex-shrink
如果孩子的总宽度超过了容器宽度（主轴），那么这个属性定义了如何把超过的那部分平分到每个孩子身上，然他们按比例来缩小一定的宽度从而可以在容器中装得下。
假设我们现在有一个容器，宽度为 `200px`，有三个孩子宽度为 `100px`，并且每个海泽有 `margin: 2px`，那么三个孩子总宽度 `(100+2*2)*3 = 312px` ，超过了 112px。
所以我们从这三个孩子身上砍下 `112px` 宽度，以让他们能装进容器中。
默认情况下，是 按 `1:1:1` 的比例来砍，也就是每个孩子各砍下 “112/3=37.3“，所以默认每个孩子宽度是 100-37.3=62.7。
那么现在我们定义第二个孩子 `flex-shrink: 2`，其他两个为 1，那么他们会把 `112px` 的宽度按 `1:2:1` 来平分。于是第二个孩子宽度为 `100-(112/4*2)=44px` 宽度，另外两个为`100-(112/4*1)=72px`：
flex-basis
在分配空白之前，孩子的宽度，默认是 `auto`，也就是孩子本身的宽度，如果你定义了 `flex-basis: 50px;` ，那么它就会覆盖掉孩子的宽度。
flex
他是 flex-grow, flex-shrink, flex-basis三个属性的快捷方式。默认是 0, 1, auto。
强烈建议用这个属性，而不是分别设定三个属性，因为这个属性可以“聪明地”设定三个属性来达到你要的效果。
你可以认为 flex 属性就是定义了每个孩子分隔父容器宽度的比例。
比如容器 200px，三个孩子设置了 flex 分别是 1-2-1，那么他们实际上宽度是 50px 100px 50px。
如果你比较较真，这个flex属性到底是如何工作的？
实际上他是自动设置了三个属性：flex-grow, flex-shrink, flex-basis。
而且为什么强烈推荐用flex，而不是分别设定三个属性，是因为 flex 属性会自动计算 flex-basis 属性的值。
比如容器宽度为 200px，然后你给三个孩子分别设置了
.item1 { flex: 1;}
.item2 { flex: 2;}
.item3 { flex: 1;}
那么他们的宽度将是 50-100-50
如果你想单独设置每一个孩子的三个属性，你会发现竟然无法按照 1-2-1 的比例平分了。
因为flexbox的计算每个孩子的宽度分两部分：
1，计算出孩子本身的宽度
2，将剩余的空白按比例平分给每一个孩子。
所以你如果这样定义：
.item1 { flex-grow: 1;flex-shrink:1;}
.item2 { flex-grow: 2;flex-shrink:2;}
.item3 { flex-grow: 1;flex-shrink:1;}
你会发现孩子不是 50-100-50 的宽度，因为他们是按照 1-2-1 平分了剩余的空白。
假设每个孩子本身是 20px 宽度，那么这么定义之后，他们其实按 1-2-1 平分了 140px 的空白。加上自身宽度之后比例 显然不是 1-2-1。
所以你还需要把它们的flex-basis也设置成 1-2-2，这么写才行：
.item1 { flex-grow: 1;flex-shrink:1;flex-basis: 20px;}
.item2 { flex-grow: 2;flex-shrink:2;flex-basis: 40px;}
.item3 { flex-grow: 1;flex-shrink:1;flex-basis: 20px;}
而这样就很麻烦，不如直接用 flex 属性来定义。而事实上，你可以认为 flex 属性就是帮你做了上面的计算。
align-self
单独在当前孩子上覆盖了 align-items 属性。
转载：http://blog.csdn.net/lihongxun945/article/details/45458717
参考：https://css-tricks.com/snippets/css/a-guide-to-flexbox/