Flex box（弹性布局）

1.基本概念：

定义：

display:flex;

相关属性：

2.基础属性:

 flex-direction: column;/* 纵向排列 */
           	 	/* row 横向排列  (默认值) 左对齐 */
        		/* row-reverse 横向反向排列 右对齐  */
 flex-wrap: wrap;/* 自动换行 */
 flex: （数字）/*分配空间属性*/
 flex-basis: 200px;/* 和width类似可以用来设置宽度 */
 flex-flow:row warp;/*是flex-direction和flex-warp的组合*/

3.排序和对齐：

/* 主轴的对齐方式  */
 justify-content: ;/* 对齐方式 */
            	/* flex 左对齐
                flex-end 右对齐
                center 居中对qi
                space-around 项目左右两端距离相等
                space-betwwen 项目间隔相等
                space-everly 项目间距相等
                */
/* 项目在交叉轴的对齐方式（需要设置高度） */
 align-items: ;/*对齐方式*/
 			   stretch/* 默认值 */
               flex-start/* 交叉轴起点对齐*/ 
               flex-end/*交叉轴终点对齐*/
               center/*垂直居中对齐*/
               baseline /*以第一行的准线对其*/
 /* 多轴线的对齐方式 */
 align-content: ;/*对齐方式*/  
 				stretch/* 默认值 */
 				flex-start/* 交叉轴起点对齐*/ 
                flex-end/*交叉轴终点对齐*/
                center/*垂直居中对齐*/
                space-around /*项目左右两端距离相等*/
                space-betwwen /*项目间隔相等*/
 排序用 order，数字越少，排名越靠前 默认为零
/* 对某一个项目进行单独的对齐*/
 align-self:;/*对齐方式*/
 			auto /*默认值*/
 			stretch /*同一行中的所有子元素高度被调整为最大*/
            flex-start/* 交叉轴起点对齐*/ 
            flex-end/*交叉轴终点对齐*/
            center/*垂直居中对齐*/
            baseline /*以第一行的准线对其*/