CSS3布局

1、多列（分栏）
column-count 规定元素应该被分隔的列数（栏数）

column-count:number | auto

column-gap 规定列之间的间隔

column-gap:length | normal;

column-rule 设置栏间分隔线

column-rule-style：设置线型
	属性值：none 没有分割线
			hidden 隐藏线
			dotted 点线
			solid 实线
			double 双线
			groove 3d沟槽效果
			ridge 3d脊状效果
			inset 3d左上阴影效果
			outset 3d右下阴影效果
column-rule-width：设置线宽
column-rule-color：设置分隔线颜色
复合写法：column-rule:线宽 线型 颜色			

column-width 规定列的宽度

column-width:length | auto

colums 规定设置 column-width 和 column-count 的简写属性

columns:width count

2、flex布局
flexbox弹性布局，可以适应不同屏幕大小以及设备
目的：提供一种更加要有效的方式对一个容器中的子元素进行排列、对齐和分配空白空间

flex-direction 指定弹性子元素在父容器中的位置。此属性作用于父容器

flex-direction：
	属性值：
			row 横向排列，从左到右排列
			row-reverse 翻转横向排列，从右往左排列
			column 纵向排列
			column-reverse 翻转纵向排列，从后往前排，最后一排在最上面

justify-content 把弹性项沿着弹性容器的主轴线对齐

justify-content：
	属性值：
		flex-start 紧凑方式左对齐
		flex-end 紧凑方式右对齐
		cenetr 紧凑方式居中对齐
		space-between 除了第1个和最后1个子元素外，其他子元素等分空白区域
		space-around 所有子元素等分空白区域

align-items 子元素在纵轴方向上的对齐方式，此属性作用于父容器

align-items：
	属性：
		flex-sta