定位： position布局： Layout (dispaly + float)flex(flexible box)弹性盒布局：为盒模型提供最大的灵活性。 flex布局： flex布局的相关属性: flex容器属性：作用于定义为flex容器的元素 flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content flex容器属性：定义在flex容器内的子项上 orderflex-growflex-shrinkflex-basisflexalign-self
说明
关于这些css3的属性，我先把它分成2大类，然后分别说明每一个属性的作用，默认值，可选值，组合作用等几个角度说明。
任何容器都可以被声明为flex布局
.box{ display: flex;}/*行内元素也可以使用Flex布局*/.box{ display: inline-flex;}设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
容器的属性: flex-direction：主轴方向默认值：raw可取值：raw | raw-reverse | column | column-reverse值说明：水平| 水平翻转| 竖直 | 竖直翻转这个值的取值将影响后面的对齐方式flex-wrap：换行
默认值：nowrap可取值： nowrap | wrap | wrap-reverse值说明：不换行 | 换行 | 换行顺序翻转这个取值影响align-items和align-content.flex-flow: 的简写justify-content: 主轴上的对齐方式
默认值：flex-start可取值：flex-end|center|space-between|space-around值说明：水平对齐align-items：align-content： 这2个属性决定纵轴的对齐方式.
当子项只有多行时，align-content才起作用；
单行，还是多行，align-items都起作用.
区别是:
align-items对齐的标准是行
align-content对齐的是容器 说明： 先定义flex-flow(尽量使用简写属性)，确定主轴方向，和是否换行。flex-direction去column时，对齐方式使用align-items，而不再是justify-content。align-items和align-content的区别在域，当子项有多行时的对齐差异，在子项没有设置margin-top，margin-bottom时，前者每行之间有空隙，后者每行紧挨着。子项有多行，取决于子项的宽度，数目，还有子项的flex的取值。 子项的属性: order： 属性定义项目的排列顺序。数值越小，排列越靠前，默认为0
.item {
order: n;
}
flex-grow: 定义项目的放大比例：默认值是0.flex-shrink: 定义项目的缩小比例，默认是1，即如果空间不足，该项目将缩小。flex-basis： | auto
定义定义了在分配多余空间之前，项目占据的空间的大小，默认值auto，即项目的本来大小。 flex: 的缩写align-self: 覆盖父元素的align-items的属性，默认是auto，继承父元素的align-items属性。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
建议优先使用简写属性flex，而不是单独写三个分离的属性，因为浏览器会推算相关值。 说明： order决定了子项可以自己定义在兄弟元素的顺序。flex-grow|flex-shrink 放大还是缩小都是针对剩余空间说的，flex布局根据flex-basis来判断子项的空间，轴上的剩余空间。放大的说明： 剩余空间，根据所有子项的放大比例划分。子项的显示空间=自身的大小+分配的剩余空间。缩小的说明：这时的剩余空间为负值，从各个子项按比例划出一块贡献给剩余空间。子项的显示空间=自身的大小-贡献的空间。order是父元素只能决定大的排序方向，内部的排序还是需要设置order，一般值越小，考前显示。 flex布局的应用: 网格布局(Bootstrap)百分比布局圣杯布局。。。。。。。
这些在追寻的小笼包的博客flex布局实例有简单的说明。在写的过程中，需要注意一些小细节，以及属性的掌握程度。通过demo来验证，本来想把demo放在github上，用gitpages显示效果，然而只有通过组合，修改属性来验证真正的用法，这些都没有办法展示，所有自己谢demo，调整属性取值才是王道。
说明： flex: 1;flex是简写的属性，而flex-grow,flex-shrink，都只能去非负的数。
flex-basis可以取值百分比，长度。
所有规定：
/* 等价写法*/
.item{
flex: auto;
}
.item {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}
/* 等价写法*/
.item{
flex: none;
}
.item {
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
}
/* 等价写法*/
.item{
flex: 1;
}
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}
flex-basis取0%的值表示：自身空间为0，剩余空间100%;
要特别注意：剩余空间的分配规则，而我们往往关注最终显示空间的效果。 后言 理解了属性的应用，什么百分比，网格布局完全没有问题，关注属性的默认值。再次说明： flex-grow的默认值是0，flex-shrink默认值是1，有的手册上关于这个值的说明错误的。在放大还是缩小属性的选择前，先考虑flex-basis的取值。百分比布局是flex取值为： flex: 0 0 n%;注意理解0%。