CSS3--多列布局与响应式

多列布局

（一）column多列属性

一、columns：设置多列布局的列宽和列数。

1. columns: < column-width > < column-count >
   columns 属性初始值根据元素个别属性而定，它适用于不可替换的块元素、行内块元素、单元格，但是表格元素除外。
   通俗理解：column属性是一个简写属性，用于设置列宽和列数
   默认值：columns:auto auto;
2. columns属性的取值为列宽和列数中的一个即可。
   例：columns:140px; //按照1列宽度为140px的原则自动分列
   columns:5; //将所有文本内容分为5列
3. 若列宽和列数同时存在：
   （1）按照列宽优先的原则进行分列。
   （2）column-count是指分列的最大列数。
   例：假设文本内容按照列宽为140px的原则分列，最多分成7列。
   columns:140px 5; //文本内容分成5列
   columns:140px 7; //文本内容分为7列
   columns:140px 10; //文本内容分为7列

二、column-width：单独设置分列的列宽。

给列定义个最小的宽度。
取值：

1. auto：（默认值）由浏览器决定列宽，表示将根据column-count列的数量自动调整列宽。
2. length：规定列的宽度、长度值，不可以为负值。

原则：取大优先
1.如果人为设置宽度大，则取更大的值，但是重新计算，有时会填充整个屏幕，所以意味着最终的宽度可能大于设置的宽度
2.如果人为设置的宽度更小，则使用默认计算的宽度

三、column-count：单独设置分列的列数。

四、column-rule：在列和列之间设置分割线。

column-rule-width、column-rule-style、column-rule-color

五、column-gap：设置列与列之间的间隔。

规定列之间的间隔，即定义栏与栏之间的间距，一般为1em，即当前所在对象或祖先元素的1个字体大小的间距。
注意：
如果column-gap与column-width加起来大于总宽度的话，就无法显示column-count指定的列数，会被浏览器自动调整列数和列宽

六、column-span：设置具体的内容是否跨列显示。

取值（该属性作用在分列显示内部的某个内容上）：

1. 1，默认值，在一列显示。
2. all，跨列显示。

七、column-fill：定义栏目的高度是否统一，规定如何对列进行填充

注意：主流浏览器都不支持column-fill属性
语法格式：column-fill: auto | balance;

1. auto：各列的高度随其内容的变化而自动变化
2. balance：默认值，各列的高度将会根据内容最多的那一列的高度进行统一

八、

-webkit-column-break-before：将具体的内容和前面的部分断开列（另起一列）。
-webkit-column-break-after：将具体的内容和后面的部分断开列。

（二）常用属性及浏览器兼容

（1）IE10 和 Opera 支持多列属性
（2）Firefox 需要前缀 -moz-，Chrome 和 Safari 需要前缀 -webkit-

（三）应用场景：瀑布流布局

	<div class="waterfall">
			<div class="waterfall-item" style="height: 100px;">1</div>
			<div class="waterfall-item" style="height: 110px;">2</div>
			<div class="waterfall-item" style="height: 200px;">3</div>
			<div class="waterfall-item" style="height: 50px;">4</div>
			<div class="waterfall-item" style="height: 160px;">5</div>
			<div class="waterfall-item" style="height: 280px;">6</div>
			<div class="waterfall-item" style="height: 130px;">7</div>
			<div class="waterfall-item" style="height: 90px;">8</div>
			<div class="waterfall-item" style="height: 80px;">9</div>
			<div class="waterfall-item" style="height: 160px;">10</div>			
		</div>

.waterfall{
				width: 600px;
				height: auto;
				border: 1px solid;
				padding: 10px;
				box-sizing: border-box;
				/*设置列数*/
				column-count: 3;
				-moz-column-count: 3;/*Firefox*/
				-webkit-column-count: 3;/*Safari和Chrome*/
				/*设置列之间的间隔*/
				column-gap: 10px;
				-moz-column-gap: 10px;
				-webkit-column-gap: 10px;
			}
			.waterfall .waterfall-item{
				break-inside: avoid;
				width: 100%;
				margin-bottom: 10px;
				background: #DDDDDD;
				text-align: center;
			}

（四）响应式常用的布局尺寸

响应式常用的布局尺寸

• 大屏幕：width>=1200px
• 默认：width>=980px
• 平板：980px>=width>=768px
• 手机到平板：width>=768px
• 手机：width<=480px

开发编程写法

@media (min-width: 1200px) { }
			/*大屏幕*/
			@media (min-width: 1200px) and (max-width: 979px) { }
			/*平板电脑768和小屏幕980之间的分辨率*/
			@media (max-width: 767px) { }
			/*横向放置的手机480和竖向放置的平板767之间的分辨率*/
			@media (max-width: 480px) { }
			/*横向放置的手机480及分辨率更小的设备*/

其他响应式尺寸布局写法

• 图片流

/*常用于图片流*/
			@media all and (max-width: 1690px) { }
			@media all and (max-width: 1280px) { }
			@media all and (max-width: 980px) { }
			@media all and (max-width: 736px) { }
			@media all and (max-width: 480px) { }

• 稍微复杂的基本响应

/*常用于稍微复杂的基本响应*/
			@media all and (max-width: 1200px) { }
			@media all and (min-width: 960px) and (max-width: 1199px) { }
			@media all and (min-width: 768px) and (max-width: 959px) { }
			@media all and (min-width: 480px) and (max-width: 767px) { }
			@media all and (max-width: 599px) { }
			@media all and (max-width: 479px) { }

• Bootstrap 3.x 全球主流框架

/*基于Bootstrap 3.x 全球主流框架*/
			@media all and (max-width: 991px) { }
			@media all and (max-width: 768px) { }
			@media all and (max-width: 480px) { }

• Bootstrap 4.x 全球主流框架

/*基于Bootstrap 4.x 全球主流框架*/
			@media all and (min-width: 576px) { }
			@media all and (min-width: 768px) { }
			@media all and (min-width: 992px) { }
			@media all and (min-width: 1200px) { }