http://www.w3cplus.com/css3/understanding-flexbox-everything-you-need-to-know.html参考文档
1：要开始使用Flexbox，必须先让父元素变成一个Flex容器。
你可以在父元素中显式的设置display:flex或者display:inline-flex。就这么的简单，这样你就可以开始使用Flexbox模块。
2.Flex容器属性
flex-direction || flex-wrap || flex-flow || justify-content || align-items || align-content
flex-direction: row || column || row-reverse || column-reverse;
flex-wrap: wrap || nowrap || wrap-reverse;
flex-flow:flex-flow是flex-direction和flex-wrap两个属性的速记属性
你还记得使用border的速记写法？border: 1px solid red。这里的概念是相同的，多个值写在同一行，比如下面的示例：
ul {
flex-flow: row wrap;
}
justify-content属性可以接受下面五个值之一：
ul {
justify-content: flex-start || flex-end || center || space-between || space-around
}
align-items属性类似于justify-content属性。只有理解了justify-content属性，才能更好的理解这个属性。
align-items属性可以接受这些属性值：flex-start || flex-end || center || stretch || baseline。
ul {
align-items: flex-start || flex-end || center || stretch || baseline
}它主要用来控制Flex项目在Cross-Axis对齐方式。这也是align-items和justify-content两个属性之间的不同之处。
align-content
还记得前面讨论的wrap属性吗？我们在Flex容器中添加了更多的Flex项目。让Flex容器中的Flex项目多行排列。
align-content属性用于多行的Flex容器。它也是用来控制Flex项目在Flex容器里的排列方式，排列效果和align-items值一样，但除了baseline属性值。
像align-items属性一样，它的默认值是stretch。你现在应该熟悉这些值。那它又是如何影响Flex容器里的10个Flex项目多行排列方式。
3.Flex项目属性
order || flex-grow || flex-shrink || flex-basisflex-basis
记得前面我说过，Flex项目是当我没有的。但我们也可以控制。
flex-basis属性可以指定Flex项目的初始大小。也就是flex-grow和flex-shrink属性调整它的大小以适应Flex容器之前。
前面介绍的是非常生要的，所以我们需要花一点时间来加强对他们的理解。
flex-basis默认的值是auto。flex-basis可以取任何用于width属性的任何值。比如 % || em || rem || px等。
注意：如果flex-basis属性的值是0时，也需要使用单位。即flex-basis: 0px不能写成flex-basis:0。
默认情况，Flex项目的初始宽度由flex-basis的默认值决定，即：flex-basis: auto。Flex项目宽度的计算是基于内容的多少来自动计算（很明显，加上了padding值）。
flex速记
flex是flex-grow、flex-shrink和flex-basis三个属性的速记（简写）。
注意它们之间的顺序。flex-grow第一，然后是flex-shrink，最后是flex-basis。缩写成GSB，可以帮助你更好的记忆。
如果flex属性值中少一个值，会发生什么呢？
如果你只设置了flex-grow和flex-shrink值，flex-basis可能是默认值0。这就是所谓的绝对flex项目。只有当你设置了flex-basis，你会得到一个相对flex项目。
flex: 0 1 auto
li {
flex: 0 1 auto;
}这相当于写了flex默认属性值以及所有的Flex项目都是默认行为。
flex: 0 0 auto
li {
flex: 0 0 auto;
}这个相当于flex: none。
还是老规矩：宽度是被自动计算，不过弹性项目不会伸展或者收缩（因为二者都被设置为零）。伸展和收缩开关都被关掉了。
它基本上是一个固定宽度的元素，其初始宽度是基于弹性项目中内容大小。
flex: 1 1 auto
这与 flex: auto 项目相同。
还是按我前面立的规矩。即，自动计算初始化宽度，但是如果有必要，会伸展或者收缩以适应整个可用宽度。
伸展和收缩开关打开了，宽度自动被计算。
flex: "positive number"
这里正数可以代表任何正数（没有引号）。这与 flex: “正数” 1 0 相同。
flex: 2 1 0 与写为 flex: 2 是一样的，2 表示任何正数。
li {
flex: 2 1 0; / *与 flex: 2相同 */
}与前面我立的规矩一样，即，将弹性项目的初始宽度设置为零（嗯？没有宽度？），伸展项目以填满可用空间，并且最后只要有可能就收缩项目。
弹性项目没有宽度，那么宽度该如何计算呢？
这个时候 flex-grow 值就起作用了，它决定弹性项目变宽的程度。由它来负责没有宽度的问题。
当有多个弹性项目，并且其初始宽度 flex-basis 被设置为基于零的任何值时，比如 0px，使用这种 flex 简写更实用。
实际发生的是，弹性项目的宽度被根据 flex-grow 值的比例来计算。
记住设置 flex-grow : 1，会让弹性项目填满可用空间。伸展开关打开了。
这里有两个弹性项目。一个的 flex-grow 属性值是 1，另一个是 2，那么会出现啥情况呢？
两个项目上的伸展开关都打开了。不过，伸展度是不同的，1 和 2。
二者都会填满可用空间，不过是按比例的。
它是这样工作的：前一个占 1/3 的可用空间，后一个占 2/3 的可用空间。
绝对和相对Flex项目
一个相对Flex项目内的间距是根据它的内容大小来计算的。而在绝对Flex项目中，只根据 flex 属性来计算，而不是内容。
绝对Flex项目的宽度只基于 flex 属性，而相对Flex项目的宽度基于内容大小。
align-self
align-self 属性更进一步让我们更好地控制弹性项目。
你已经看到 align-items 属性是如何有助于整体对齐弹性容器内的所有弹性项目了。
如果想改变一个弹性项目沿着侧轴的位置，而不影响相邻的弹性项目，该怎么办呢？
这是 align-self 属性大展拳脚的地方了。
该属性的取值可以是这些值之一：auto || flex-start || flex-end || center || baseline || stretch。
Auto-margin 对齐
当在Flex项目上使用 margin: auto 时，值为 auto 的方向（左、右或者二者都是）会占据所有剩余空间。
解决嵌套中的flex容器的占用空间比例问题
一定有办法让所有这些放在一行，每个段落占据该行相等空间。用Flexbox来搞定！这里的概念与很多栅格系统中用的一样。
li {
display: flex; /*段落现在显示在一行上*/
padding: 0 20px; /*留点呼吸空间*/
min-height: 50px;
}
li p {
flex: 0 0 25%; /*这是甜面酱*/
}看到段落会发生什么了吗？
flex: 0 0 25%;
“不要伸展或者收缩，不过每个段落应该占据 25% 的可用空间” 。段落所占空间是相等的。