1、display:flex
说明:
设置为弹性盒 (父元素添加)
2、flex-direction (主轴排列方式)
说明:
顺序指定了弹性子元素在父容器中的位置
row 默认在一行内排列
row-reverse: 反转横向排列 (右对产，从后往前排，最后一项排在最前面
column: 纵向排列。
column-reverse
3、justify-content (主轴对齐方式)
说明:
内容对齐 (justify-content) 属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线 (main axis)对
flex-start默认，]顶端对产
flex-end天端对文
center居中对产
space-between两端对产，中间自动分配
space-around自动动分西客
4、align-items 侧轴对齐方式)
说明:
侧轴对产方式
flex-start: 弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界
flex-end: 弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界
center:弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸，则会向两人方向溢出相
同的长度)。
baseline: 如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start 等效，其它情况下，该值将参与基线对文
5、flex-wrap
说明:
该属性控制flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。
nowrap: flex容器为单行。该情况下flex了项可能会溢出容器
wrap: flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行
6、align-content (行与行之间对产方式
说明:
当伸缩容器的侧轴还有多余空间时，本属性可以用来调准一伸缩行在伸缩容器里的对齐方式，这与调准伸缩项目在主轴上对齐
方式的<justify-content'> 属性类似。请注意本属性在只有一行的伸缩容器上没有效果
flex-start没有行间距
flex-end底对产没有行间距
center居中没有行间距
space-between两端对文，中间自动分配
space-around自动分配距离
7、align-self
说明:
align-self 属性规定灵活容器内被选中项目的对产方式
注意: align-self 属性可重写灵活容器的 align-items 属性
auto 默认值元素继承了它的父容器的 align-items 属性，如果没有父容器则为“stretch"。
Stretch 元素被拉伸以适应容器.
Center 元素位于容器的中心。
flex-start 元素位于容器的开头
flex-end 元素位于容器的结尾。
8、order
说明:
number排序优先级，数字越大越往后排，默认为0，支持负数
说明:
9、复合属性。设置或检索弹性盒模型对象的子元素如何分配空间。
缩写 [flex: 1]，则其计算值为 [1 1 0%
缩写 [flex: auto]，则其计算值为 [1 1 auto
flex: none]，则其计算值为 [0 0 auto
flex: 0 auto] 或者 [flex: initial]，则其计算值为 0 1 auto] ，即 [flex] 初始值
10、flex三个属性值介绍
flex-grow
个数字，规定项目将相对于其他灵活的项目进行扩展的量
flex-shrink
个数字，规定项目将相对于其他灵活的项目进行收缩的量。
flex-basis
项目的长度
三、CSS3 多列
1、column-count
说明:
属性规定元素应该被分隔的列数
适用于: 除table外的非替换块级元素,table cells,inline-block元素
2、column-gap
说明
说明:
属性规定列之间的间隔大小
3、column-rule
说明:
设置或检索对象的列与列之间的边框。复合属性。
column-rule-color规定列之间规则的颜色
column-rule-style规定列之间规则的样式
column-rule-width规定列之间规则的宽度。
4、column-fill
说明:
设置或检索对象所有列的高度是否统
auto: 列高度自适应内容
balance: 所有列的高度以其中最高的一列统
5、column-span
说明:
设置或检索对象元素是否横跨所有列
none: 不跨列
all: 横跨所有列
6、column-width
说明
设置或检索对象每列的宽度
