css-伸缩盒布局

伸缩盒布局（css3）

1.网页分类

1）固定内容宽度（ wrapper width:1090px）淘宝，网易严选
2）内容宽度自适应 （响应式）腾讯视频、爱奇艺
3）完全响应式  H5网页【伸缩盒】
    微信打开的网页都属于完全响应式

一般应用于响应式布局

2.概念
主轴：伸缩盒元素排列的轴
交叉轴：与主轴垂直的轴

伸缩盒元素沿着主轴排列，默认情况下，伸缩盒元素在交叉轴上的距离是100%，在主轴的距离由内容决定

3.应用
伸缩盒容器
display: flex; /声明当前元素为伸缩盒元素/
flex-direction:row ; /主轴在x轴上/
flex-wrap: wrap; /当伸缩盒元素在伸缩盒容器中放不下的时候，是否需要进行换行/
justify-content: space-around; /伸缩盒元素在主轴上的排列方式/
align-items:stretch; /伸缩盒元素在交叉轴的排列/

伸缩盒元素
flex-grow:1; // 伸缩盒元素对于主轴上伸缩盒容器的剩余空间的分配 ，1表示占一份
flex-shrink:1; // 对于亏损空间的抵扣
flex-basis:100px; // 基准值
flex:grow shrink basic; 速写模式