概念：
弹性盒布局模型（Flexble Box Layout）是css3规范中提出的一种新的布局方式。他可以用简单的方式满足很多常见的布局需求。
基本概念：
采用flex布局的元素，称为flex容器，简称“容器”。他的所有子元素自动称为容器成员，称为flex项目，简称“项目”。
容器?默认存在两根轴：?水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做 main start （主轴起始），
结束位置叫做 main end （主轴结束）；交叉轴的开始位置叫做 cross start （交叉轴起始），结束位置叫做 cross end （交叉轴结束）。
项?目默认沿主轴排列列。单个项?目占据的主轴空间叫做 main size ，占据的交叉轴空间叫做 cross size
设置在容器?上的6个属性。
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
1 、flex-direction 属性
flex-direction ?用来确定主轴的?方向，从?而确定基本的项?目排列列?方向。
flex-direction 属性的取值及其含义：
row（默认值）：主轴为?水平?方向，起点在左端；
row-reverse：主轴为?水平?方向，起点在右端；
column：主轴为垂直?方向，起点在上沿；
column-reverse：主轴为垂直?方向，起点在下沿。
2 、flex-wrap属性
默认情况下，项?目都排在?条线上（?又称“轴线”）上。 flex-wrap 属性定义，如果?条轴线排不下，如何换?。
flex-wrap 属性的取值及其含义：
nowrap（默认值）：不不换?行行（强?行行挤压，平均分配宽度）；
wrap：换?行行，第?一?行行在上?方（从上往下?一次排列列）；
wrap-reverse：换?行行，第?一?行行在下?方（从下往上?一次排列列）；
说明：如果?高度固定，并且有多余空间，那么多余空间将会平均分配给每?一?行行的外边距。
3 、flex-flow
flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap 。
.box{ flex-flow: row wrap; }
4 、justify-content 属性
justify-content 属性定义了了项?目在主轴上的对?齐?方式。
justify-content 属性的取值及其含义：
（具体对?齐?方式与主轴的?方向有关。下?面假设主轴为从左到右。）
flex-start（默认值）：左对?齐
flex-end：右对?齐
center： 居中
space-between：两端对?齐，项?目之间的间隔都相等。
space-around：每个项?目两侧的间隔相等。所以，项?目之间的间隔?比项?目与边框的间隔?大?一倍。
5 、align-items 属性
align-items 属性定义项?目在交叉轴上如何对?齐。
align-items 属性的取值及其含义：
（具体对?齐?方式与交叉轴的?方向有关。下?面假设交叉轴为从左到右。）
flex-start：交叉轴的起点对?齐。
flex-end：交叉轴的终点对?齐。
center：交叉轴的中点对?齐。
baseline：所有?文字相对于同?一基线对?齐
6 、align-content 属性
align-content 属性定义了了多根轴线的对?齐?方式。如果项?目只有?一根轴线，该属性不不起作?用。
align-content 属性的取值及其含义：
flex-start：与交叉轴的起点对?齐。
flex-end：与交叉轴的终点对?齐。
center：与交叉轴的中点对?齐。
space-between：与交叉轴两端对?齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔?比轴线与边框的间隔?大?一倍。
stretch（默认值）：轴线占满整个交叉轴。
设置在项?目上的6种属性。
order
flex-grow
flex-shrink
flex-basis
flex
align-self
1 、order 属性
order 属性定义项?目的排列列顺序。数值越?小，排列列越靠前，默认为0。
.item:nth-child(3){
order:-1;
}
2 、flex-grow 属性
flex-grow 属性的值是?一个没有单位的?非负数，默认值为0。?用来定义项当容器?有多余的空间时，这些空
间在不不同条?目之间的分配?比例例。
.item{
flex-grow:1;
}
如果所有项?目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果?一个项?目的flex-grow属性为2，
其他项?目都为1，则前者占据的剩余空间将?比其他项多?一倍。
3 、flex-shrink 属性
flex-shrink 属性在使?用上类似于" flex-grow "。默认值为1。该属性的值也是?无单位的，表示的是当
容器?的空间不不?足时，各个项?目的尺?寸缩?小的?比例例。
.item{
flex-shrink:1;
}
如果所有项?目的flex-shrink属性都为1，当空间不不?足时，都将等?比例例缩?小。如果?一个项?目的flex-shrink属性为
0，其他项?目都为1，则空间不不?足时，前者不不缩?小。
负值对该属性?无效。
4、 flex-basis 属性
flex-basis 属性定义了了项?目占据的主轴空间?比例例。浏览器?根据这个属性，计算主轴是否有多余的空间。
它的默认值是auto，即项?目的本来的?大?小。
.item{
flex-basis:50%;
}
它可以设为跟 width 或 height 属性?一样的值（?比如350px），则项?目将占据固定空间。
5 、flex 属性
flex 属性是 flex-grow 、 flex-shrink 和 flex-basis 的简写，默认值为0 1 auto。后两个属性可选。
.item{
flex:none;
}
该属性有两个快捷值：auto(1 1 auto)和none(0 0 auto)。
建议优先使?用这个属性，?而不不是单独写三个分离的属性，因为浏览器?会推算相关值。
6、 align-self 属性
align-self 属性允许单个项?目有与其他项?目不不?一样的对?齐?方式，可覆盖 align-items 属性。默认值
为auto，表示继承?父元素的 align-items 属性，如果没有?父元素，则等同于 stretch 。
align-self 属性的取值，除了了多?一个auto，其他都与 align-items 属性完全?一致。
flex-start：交叉轴的起点对?齐。
flex-end：交叉轴的终点对?齐。
center：交叉轴的中点对?齐。
baseline：所有?文字相对于同?一基线对?齐
原文：http://www.cnblogs.com/cheng-du-lang-wo1/p/7113180.html