CSS3总结：弹性盒子(flex)、弹性盒子布局

• 弹性盒子容器的属性与应用
• display:flex/inline-flex
• flex-direction
• flex-wrap
• justify-content
• align-items
• align-content
• flex-flow
• 弹性盒子子项的属性与应用
• order
• align-self
• flex
• flex-grow
• flex-shrink
• flex-basis
• 弹性盒子布局
• flex居中/T字布局
• 可动态增加导航栏
• 等分布局
• 圣杯布局
• 流式布局

flex-direction的示例：

flex-direction:row;/*demo1--该值为默认值*/

flex-direction:column;/*demo2--*/

flex-direction:row-reverse;/*demo3--*/

flex-direction:column-reverse;/*demo4--*/

通过flex-wrap定义单行或多行的弹性盒子布局，nowrap（单行布局，默认值）、wrap（多行布局）、wrap-reverse（多行，且按每行反转排列）。该属性主要用于启用弹性盒子的多行布局功能，而这里的多行并非传统的纵横排列上的行，准确的来说是当主轴上方向上出现压缩时在交叉轴上开启多个平行主轴方向的布局。看下列示例：

 1 /*demo1--按照默认的主轴方向和默认的单行布局*/
 2 flex-direction:row;
 3 flex-wrap:nowrap;
 4 /*demo2--主轴方向为纵向，默认单行布局*/
 5 flex-direction:column;
 6 flex-wrap:nowrap;
 7 /*demo3--主轴方向默认，采用多行布局*/
 8 flex-direction:row;
 9 flex-wrap:wrap;
10 /*demo4--主轴方向默认，采用多行且反向排列布局*/
11 flex-direction:row;
12 flex-wrap:wrap-reverse;
13 /*demo5--主轴方向为纵轴，采用多行布局*/
14 flex:direction:column;
15 flex-wrap:wrap;

弹性盒子flex的对齐属性：

justify-content、align-items、align-content

justify-content：表示主轴方向的对齐属性，对齐方式分别有轴的正方向(起始方向)对齐、轴的反方向对其、轴的居中对齐、项目均衡散列对齐（最前方和最后方的项目与父级没有间距）、项目正反两侧等距对齐（类似两侧加上margin）===【flex-start、flex-end、center、space-between、space-around】；

align-items:表示交叉轴方向的（行内轴）对齐属性，属性值(同解析中的类别顺序)，对齐方式分别有轴的正方向对齐，轴的反方向对齐、基于行内轴的中心对齐、基于内容底线对齐(也可以说是基于内容对齐)、将项基于交叉轴方向基于父级最大访问伸缩===【flex-start、flex-end、center、baseline、strecth】；

align-content:表示所有项目的整体对齐方式（只对多行起作用，准确的说这个属性才是交叉轴的对齐方式）对齐方式分别有轴的正方向对齐、轴的反方向对其、轴的居中对齐、沿交叉轴的行列均衡散列对齐、沿交叉轴的行列两侧等距对齐、沿交叉轴的行列平均分配空间的伸缩===【flex-start、flex-end、center、space-between、space-around、strecth】

justify-content表现效果：

1 justify-content:start;
2 justify-content:end;
3 justify-content:center;
4 justify-content:space-between;
5 justify-content:space-around;

align-items表现效果：

1 align-items:flex-start;/*所有子项沿上边缘对齐，并紧贴父级的上内边缘*/
2 align-items:flex-end;/*所有子项沿下边缘对齐，并紧贴父级的下内边缘*/
3 align-items:center;/*所有子项沿行内轴中线对齐*/
4 align-items:baseline;/*这里子项b添加了margin-top:15px;子项c添加了padding-top:15px;*/
5 align-items:stretch;/*这里所有子项没有设置height*/

align-content表现效果：

1 flex-wrap:wrap;/*所有align-content示例必须都是在多行列（相对主轴）的情况下才生效，所以这行代码是所有示例中都有*/
2 align-content:flex-start;/*示例一*/
3 align-content:flex-end;/*示例二*/
4 align-content:center;/*示例三*/
5 align-content:space-between；/*示例四*/
6 align-content:space-around；/*示例五*/
7 align-content:stretch;/示例六，所有子项不设置height/