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(条件){选择器{属性:值;}}