CSS3新增布局：
多列布局：
多列布局：
主要控制大篇幅文本
多列：
1.设置列数：
column-count:number;
number:表示数值，不用单位
2.设置列宽:
column-width:value;
value:数值，加单位，表示最小的列宽
3.列宽和列数的复合属性：
column:;
列宽和列数同时使用时：最多列数，最小列宽
4.列与列之间的间隔：
column-gap:value;
默认值大于10px
5.列与列之间的边框：复合属性
column-rule:width color style;
6.列高是否统一：
column-fill:;
auto 列高度自适应
balance 以最高的高度统一，默认值
7.元素是否跨列：
column-span:;
none 不跨列
all 横跨所有列
8.兼容性：
避免元素内部发生中断：
break-inside:avoid;
弹性盒：为父元素添加的属性：
Flex布局(弹性盒)
1.开启弹性盒子：
display:;
flex 块级的弹性盒子
inline-flex 行内块级的弹性盒子
弹性盒的说明：
开启弹性盒后，里面的元素会根据主轴的起始位置排列布局
默认时，主轴方向，自左向右
使用margin:auto;
float，vertical-align，clear失效
高度自动拉伸
2.设置主轴的方向：
flex-direction:;
row 自左向右
row-reverse 自右向左
column 自上向下
column-reverse 自下向上
3.设置主轴对齐方式的属性：
justify-content:;
flex-start 默认值，沿主轴的起始点对齐
flex-end 沿主轴的终点对齐
center 中点
space-between 两端对齐，中间自动分配空余空间
space-around 平均分配给每个元素，每个元素的左和右空余空间相等，中间间距是两边间距的二倍
space-evenly 平均分配在每两个元素中间
3.设置侧轴对齐方式的属性：单行的对齐属性
align-items:;
flex-start 沿侧轴的起始点对齐
flex-end 终点对齐
center 居中
baseline 基线
stretch 默认值，拉伸至父元素的大小
设置单行的对齐方式
4.子元素是否换行显示：
flex-wrap:;
no-wrap 默认值，不折行
wrap 折行
wrap-reverse 反向折行
5.设置多行的对齐属性：
align-content:;
flex-strat
flex-end
center
space-between
space-around
space-evenly
stretch 默认值，拉伸至父元素大小
说明：
1.必须配合flex-wrap:wrap / wrap-reverse 才能生效
6.复合属性:
flex-flow:row no-wrap;
为子元素添加的属性：
1.设置子元素的对齐属性：
align-self:;
auto
stretch
center
flex-start
flex-end
2.设置子元素的排列顺序：
order:;
number
3.设置子元素如何分配空间：
复合属性：
flex:number;
number 正整数不加单位
说明：
1.当flex和width同时使用时，优先识别flex
2.默认值:0 1 auto
3.flex:1;相当于
flex-grow:1;
flex-shrink:1;
flex-basis:0%;
单个属性：
1.flex-grow:number; 扩展的量
属性值是数值不加单位
默认值：0；表示不扩展
1；表示扩展
2.flex-shrink:;收缩的量
默认值：1；表示收缩
0；表示不收缩
当子元素宽度之和超出父元素时；
3.flex-basis:;项目长度
属性值:px / %
flex-basis的优先级高于width
默认值auto；自由显示，根据内容显示或者width显示宽
