共计 364 个字符，预计需要花费 1 分钟才能阅读完成。
伸缩盒布局（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; 速写模式正文完