自我学习第十五天--多列布局、子元素设置的属性、移动端的适配方案

1、多列布局

父元素设置

column-count
设置内容分为几列

column-width
每一列宽度多少，跟column-count属性冲突

column-rule
列分隔边框线

column-gap
列间距

column-fill
设置剩余距离的设置
				auto   自动占满前面的距离，剩余的距离在最后显示
                balance 剩余距离自动平分

2、子元素设置的属性

column-span
定义多列标题的位置
			all		所有内容的上面
			1		在第一列内容里面

break-inside:
定义多列内容是否中断
			avoid		不自动中断
			auto		自动中断

3、移动端的适配方案

流式布局：内容宽度就是固定大小，大屏幕分辨率显示内容多，小屏幕分辨率显示内容少
等比缩放布局：
		各个分辨率下内容比例都相同

flexble.js