一、弹性盒布局

（一）设置在父元素上

1.display:flex; 将父元素设置成弹性盒，那么里面的子元素会在主轴方向上默认不换行摆放；侧轴方向的大小不设置的话，就会在当前行默认被拉伸

2.flex-direction 设置主轴方向

属性值：
row 从左往右
row-reverse 从右往左
column 从上到下
column-reverse 从下到上

3.flex-wrap 伸缩换行

nowrap默认不换行 wrap 换行
*wrap-reverse 换行反向主轴是水平时，上下反向，主轴垂直时，左右反向；

4.flex-flow:flex-direction || flex-wrap;

5.justify-content 设置子项目在主轴方向的对齐方式

* flex-start 默认在主轴的起点位置靠齐摆放

* flex-end 在主轴的终点位置靠齐摆放
* center 在主轴的中间位置靠齐摆放
* space-between 将主轴方向空白区域平分在子项目之间

*space-around 将主轴方向空白区域环绕在子项目两侧

6.align-items 设置子项目在（当前行）侧轴方向的对齐方式

* stretch 若不设置子项目在侧轴方向的大小，会被默认拉伸

* flex-start 若设置子项目在侧轴方向的大小，会被默认摆放在侧轴的起点位置
* flex-end 摆放在侧轴的终点位置
* center 摆放在侧轴的中间位置
* baseline 子项目以基线对齐

7.align-content 控制子项目在侧轴方向的对齐方式（有换行情况下用此属性，单行用align-self）

属性值等同于 justify-content

flex-start：各行向伸缩容器的起点位置堆叠；
flex-end：各行向伸缩容器的结束位置堆叠；
center：各行向伸缩容器的中间位置堆叠；
space-between：各行在伸缩容器中平均分布；
space-around：各行在伸缩容器中平均分布，两端保留一半的空间；
stretch：各行将伸展以占用额外空间。

（二）设置在子元素上

1.flex 设置子项目在主轴方向的比份

2.align-self 设置单个子项目在（当前行）侧轴方向的对齐方式

取值同align-items

flex-start：伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起始边；(侧轴的起点位置摆放)
flex-end：伸缩项目在侧轴终点边的外边距紧靠住该行在侧轴终点边；（侧轴的终点位置摆放）
center：伸缩项目的外边距盒在该行的侧轴上居中放置；（侧轴居中摆放）
baseline：伸缩项目根据伸缩项目的基线对齐；（侧轴方向子项目以基线对齐）
stretch：伸缩项目拉伸填充整个伸缩容器。（伸缩项目不给高度时，默认会被拉伸。）

3.order 设置子项目的显示顺序

* 设置了order会放在没设置order子项目后面

* 都设置了order,数字越小越靠前

二、多列布局

1.column-width 每列的最小宽度

2.column-count 最多的列数

3.column-gap 列间距

4.column-rule 列边框

5.column-span 跨列

*none不跨列 all跨所有列

column-width:300px;
column-count:4;
column-gap:30px;
column-rule:4px solid #ccc;

三.媒体查询

1. 用法 @media screen and (条件){选择器{声明}}

2. min-width 当页面宽度大于最小宽度，生效。（从小写到大）

max-width 当页面宽度大于最小宽度，生效。（从大写到小）
min-device-width 【设备宽度】

3.link`[media="screen and (条件)"][href]`

1.自适应布局

元素的宽高自适应窗口或者子元素的大小，从而实现同一套页面适应不同的窗口、分辨率及设备。（！！！）
2.响应式布局（一般都是用于较为简单的页面）
响应不同的屏幕大小或者设备大小，对同一套页面的部分布局进行修改，但大体保持一致。