flex子元素属性、多列布局、响应式布局的优缺点及媒体查询

flex 项目（子元素）
属性：
order：；项目的优先排列顺序，数值越大，越靠到后边去 （可以为负数）

flex：1； 剩余的空间都给指定子元素（综合写法）
flex-grow： 数字不带单位，定义项目剩余的宽度进行扩张（放大）

flex-shrink： 数字不带单位，，项目总宽度超出容器时的缩小设置
    0  本身的大小，不缩小也不放大
    1  平均分配

flex-basis：0%；项目宽度（会覆盖项目的width值）
综合写法，flex：放大 缩小 长度；（一般后两者不写）

css3多列布局
column-count：；分列
column-gap：；列间隔
column-rule：大小 形态 颜色；分割线
column-fill：；列的高度是否统一
auto 列高度自适应
balance 所有列的高度，以其中最高的一列统一
column-span：；是否横跨所有列
none 不跨
all 横跨所有列

 column-width：；列宽

拓展: break-inside：avoid 阻止断层

响应式布局
为了适应不同的设备，不同的分辨率
不同的设备（pc电脑端 平板电脑 手机端）

响应式布局的优势：
1：一套项目，能适应不同的设备，灵活
2：能够快捷解决多设备显示适应问题
3：从显示上来看：用户体验会更好
响应式布局的缺点：
1：繁琐，代码量大，会出现隐藏无用的元素，加载时间加长
2：开发成本较高（不同的项目组）
开发一套产品不能满足要求
一套图也不能满足要求（移动端 pc端）
前端布局：一套布局方案是不能满足
数据：同时分为pc端和移动端
3：兼容不同的设备，兼容性工作量大，效率低下
4：这是一个折中的解决方案，多方面的因素影响达不到最佳的效果
5：会出现用户混淆

媒体查询:
判断设备浏览器的宽度是多少
@media 设备 and （条件）{
选择器{属性：值；}
}