弹性布局flex、弹性盒子免学习直接使用版

首先开启弹性布局flex：

display:block;	开启弹性布局flex

设置内容排列：

flex-direction: row;	内容从左到右(默认样式)
flex-direction: row-reverse;	内容从右到左
flex-direction: column;	内容从上到下(1、2、3、4、5…)
flex-direction: column-reverse;	内容反转从上到下(5、4、3、2、1…)

设置内容换行：

flex-wrap: nowrap;	内容不换行(默认样式)
flex-wrap: wrap;	内容换行
flex-wrap: wrap-reverse;	内容反转换行

横向设置内容：

justify-content: flex-start;	从左到右对齐 (默认样式)
justify-content: flex-end;	从右到左对齐
justify-content: center;	横向内容居中
justify-content: space-between;	两端对齐，内容之间自动分配
justify-content: space-around;	内容自动分配距离

竖向设置内容：

align-items: stretch;	内容没有高度的情况下，占满父容器高度(默认)
align-items: flex-start;	竖向内容上方对齐
align-items: flex-end;	竖向内容下方对齐
align-items: center;	竖向内容居中
align-items: baseline;	后面内容根据第一个内容的文字对齐

以上内容搞明白基本算够用。

交叉轴设置内容：

align-content属性定义了多根轴线的对齐方式，如果项目只有一根轴线，则该属性不起作用。

align-content: stretch;	轴线占满整个交叉轴(默认值)
align-content: flex-start;	交叉轴的起点对齐
align-content: flex-end;	交叉轴的终点对齐
align-content: center;	交叉轴的中点对齐
align-content: space-between;	交叉轴两端对齐 内容间隔平均分布
align-content: space-around;	每根轴线两侧的间隔都相等