1、flex属性
flex-grow:;数字不带单位,定义项目剩余的宽度进行扩张(放大)
flex-shrink:;数字不带单位,项目总宽度超出容器时的缩小设置
0 本身的大小,不缩小也不放大
1 平均分配,默认值
flex-basis: 0%;项目的长度
综合写法: felx:放大 缩小 长度; 一般后两者默认不写
2、多列布局:
column-count:;分列
column-gap:;列间距
column-rule:大小 形态 颜色;分割线
column-fill:;列的高度是否统一
auto 列高度自适应内容
balance 所有列的高度以其中最高的一列统一
column-span:;是否横跨所有列
none 不跨
all 横跨所有
column-width:;列宽
3、响应式布局：
响应式的优势:一套项目,能适应不同的设备,灵活； 能够快捷解决多设备显示适应问题； 从显示上来看: 用户体验会更好一点
响应式的缺点:繁琐,代码量大,会出现隐藏无用的元素,加载时间加长；开发成本偏高(不同的项目组)；开发一套产品不能满足要求，一套图也不能满足要求(移动端 pc端的)；前端布局: 一套布局方案是不能满足，数据: pc 移动端；兼容不同的设备,兼容性工作量加大,效率低下；这是一个折中的解决方案,多方面的因素影响达不到最佳的效果；会出现用户混淆
4、媒体查询
判断一下浏览器的宽度是多少
决定box的背景颜色是多少
@media 设备 and (条件) and (条件){
选择器{属性:值;}
}
例如：
@media all and (min-width:700px){
.box{
background: pink;
width:300px;
display:none;
}
}
原文地址：https://www.cnblogs.com/xsqlj/p/12555561.html