一、分栏布局
- 设置最大栏数
语法： column-count:数值；
2.设置每栏最小宽度
语法：column-width:数值+单位；
3.设置栏间距
语法：column-gap:数值+单位；
4.设置栏分隔线
语法： column-rule:3px solid(实线)/dashed(虚线)/dotted(圆点线)/double(双线) red;
5.设置是否跨栏显示
语法：column-span:none(否)/all(是)
注：给需要跨栏显示的元素添加；
二、 弹性布局
语法：display:flex;
说明：
- 当给元素设置了display：flex；后就形成了弹性布局；
- 父元素设置flex后，子元素的float，clear，vertical-align将不起作用；
- 我们设置了flex布局的父元素叫做flex容器，子元素叫做flex项目；
- 设置了flex布局后，会产生两根轴线：主轴和交叉轴(侧轴)；
三、flex容器属性
- 设置主轴的方向(flex项目排列的方向)；
语法：flex-direction:row/row-reverse/column/column-reverse
row 默认值，主轴在水平方向，起点在左端；
row-reverse主轴在水平方向，起点在右端；
column 主轴在垂直方向，起点在上沿；
column-reverse主轴在垂直方向，起点在下沿；
- 设置flex项目单行或多行显示
语法： felx-wrap:nowrap/wrap-reverse;
nowrap 默认值，flex项目在一行显示；
wrap flex项目多行显示；
wrap-reverse换行，但行的顺序是倒过来的；
3.flex-direction 和flex-wrap的简写方式；
语法：flex-flow:row nowrap;默认；
4.设置主轴对齐方式
语法： justify-content:flex-start/flex-end/center/space-between/space-around;
flex-start: 对齐主轴起点；
flex-end： 对齐主轴终点；
center： 居中对齐；
space-between： flex项目两端对齐，中间间隔相等；
space-around: flex项目两侧间隔相等；
5.设置交叉轴对齐方式
语法：align-items:flex-start/flex-end/center/baseline/stretch;
flex-start 对齐交叉轴的起点；
flex-end 对齐交叉轴的终点；
center 以交叉轴为参考，居中对齐；
baseline flex项目文字基线对齐；
stretch flex项目没有设置高度将占满整个父元素高度；
窗口高度自适应 (让某个元素的高度等于屏幕窗口高度)；
html,body{height:100%}先让html和body的高度等于窗口高度； 元素{height:100%};
窗口居中
- 已知或者未知大小的元素在屏幕窗口水平垂直都居中
html,body{height:100%}高度自适应；
body { display:flex; justify-content:cneter; align-items:center; }
- 已知或未知大小的元素在父元素中水平垂直都居中
父元素{display:flex;justify-content:center;align-items:cneter;}
- 设置多根轴线对齐
语法：align-content:flex-start/flex-end/center/space-between/space-around/stretch
flex-start 对齐交叉轴起点；
flex-end 对齐交叉轴终点；
center 以交叉轴为参考，居中对齐；
space-between 交叉轴两端对齐，轴线之间的间距平均分布；
space-around flex项目(沿交叉轴方向)之间的间隔相等
stretch flex项目没有设置高度，占满整个父元素的高；
四、flex项目属性
- 设置flex项目排列顺序
语法： order: 0/1/数值； 不能为小数；
注： 默认为0 值越小越靠前；
- 设置flex项目放大比例
语法： flex-grow:0/1/数值；
注：
- flex-grow的默认值为0，即使父元素存在剩余空间，flex项目也不放大；
- 当 flex-grow的值为1时，flex项目等比例放大；
- 设置flex项目缩小比例
语法： flex-shrink:1/0/数值；
注：
- flex-shrink的默认值为1，当父元素空间不足时，flex项目等比例缩小；
- flex-shrink的值为0时，flex项目不缩小，并且在一行显示
- 在分配剩余空间之前，设置flex项目占据主轴的空间；
语法： flex-basis:auto/百分比/数值+单位；
注： flex-basis:auto是默认值；
- flex-grow,flex-shrink,flex-basis的简写方式
语法： flex:0 1 auto;
注： flex:1 1 0% =flex:1
flex为1的两个重要应用
- 分配剩余空间给某个flex项目；
- flex项目等比例分配空间；
- 设置单个flex项目的交叉轴对齐方式
语法： align-self flex-start flex-end cneter baseline streth;
响应式布局
1.概念
响应式是指根据不同设备浏览器分辨率或者尺寸来展示不同页面结构，行为表现的设计方式；
2.原理
响应式通过媒体查询来检测不同设备的变化，head部分必须添加meta声明
3.优缺点
优点： 解决了多设备适应问题，灵活性更强；
缺点：工作量大，加载时间变化；
媒体查询
1.外链式媒体查询
语法：
注：当屏幕窗口宽度大于等于960px时，引入1.css文件
2.内嵌式媒体查询
语法： @media screen and (max-width:960px){ body{background:blue} }
注： calc() 函数进行不同单位的加载减乘除计算
接下来进入CSS3形变 =>
