响应式布局

flex-grow:;定义项目进行扩张（放大）

flex-shrink:;项目总宽度超出容器时的缩小设置

0本身无变化

1平均分配

flex-basis:;项目的长度

综合写法：flex:放大 缩小 长度；（后两者一般不写）

多列布局：column-count:;分列

column-gap:;列间隔

column-rule:大小 形态 颜色；分割线

column-fill:;列的高度是否统一

auto列高度自适应内容

balance所有列的高度以其中最高的一列统一

column-span:;是否横跨列

none不横跨（默认）

all横跨所有列

column-width:;列宽

绝大部分项目：pc端–官网

移动端–移动端网页，app,小程序…

响应式布局：为了适应不同的设备，分辨率

不同的设备（pc 电脑端 平板电脑 手机端）

优势：1、一套项目，能适应不同的项目，灵活

2、能够快捷解决多设备显示适应问题

3、从显示上来看：用户体验会更好一点

缺点：1、繁琐，代码量大，会出现隐藏无用的元素，加载时间加长

2、开发成本偏高（不同的项目组）

开发一套产品不能满足要求

一套图也不能满足要求（移动端 pc端）

前端布局：一套布局方案是不能满足

数据：pc 移动端

3、兼容不同的设备，兼容性工作量加大，效率低下

4、这是一个这种的解决方案，多方面的元素影响达不到最佳效果

5、会出现用户混淆

响应式的目的：利用响应式的思想，做移动端项目的适配

媒体查询 判断浏览器的宽度为多少

决定box的背景颜色是多少

@media 设备 and(条件){选择器{属性：值；}}