伸缩盒布局（css3）
1.网页分类
1）固定内容宽度（ wrapper width:1090px）淘宝，网易严选2）内容宽度自适应 （响应式）腾讯视频、爱奇艺3）完全响应式 H5网页【伸缩盒】 微信打开的网页都属于完全响应式一般应用于响应式布局
2.概念
主轴：伸缩盒元素排列的轴
交叉轴：与主轴垂直的轴
伸缩盒元素沿着主轴排列，默认情况下，伸缩盒元素在交叉轴上的距离是100%，在主轴的距离由内容决定
3.应用
伸缩盒容器
display:flex; 声明当前元素为伸缩盒元素flex-direction:row; 指定主轴方向伸缩盒元素
flex-grow:1; 伸缩盒元素对于主轴上伸缩盒容器剩余空间的分配，1表示占一份flex-shrink:1; 对于亏损空间的抵扣flex-basic:100px; 基准值flex:grow shrink basic; 速写模式