01-flex伸缩布局
1.伸缩(弹性)布局的作用：
给父盒子加buff，让功能更加强大
2.伸缩布局的应用场景：多列布局
a.以前的方案：浮动 百分比 实现
弊端：不能实现所有的情况(3列 7列 9列)
b.伸缩布局：浮动 百分比搞不定的多咧布局
3.伸缩布局的使用流程：
设置“父元素”的 display：flex;
4.伸缩布局的三要素（原理）:
a.主轴(main axis.默认从左往右)：元素 水平方向排列方式
特点：子元素的宽度如果超出父元素：子元素不会超出，伸缩盒子会进行合理分配
b.次轴(cross axis.默认从上往下)：元素 垂直方向排列方式
次轴永远和主轴是垂直的
特点：子元素总高度大于父元素的高度：子元素会超出
c.内容(item)：子元素
5.伸缩布局的特点（属性）
以下是给父元素设置的属性：
1.flex-direction 属性决定主次轴的方向 （不常用）
默认为row：水平从左往右
row-reverse：从右往左
column：从上往下
column-reverse：从下往上
图解：
flex-direction2.justify-content：flex-主轴方向排列对齐方式（常用）
flex-start 左对齐
flex-end 右对齐
center: 水平居中
space-around 间距相等
space-between 两端对齐，元素之间间隔相等
3.align-items:flex-次轴排列方式(常用)
flex-start:从次轴起始方向对齐，默认顶部
flex-end:从次轴结束方向对齐，默认底部
center：中心对其
stetch：如果元素没有给高度那么将铺满父盒子高度
4.flex-wrap:主轴换行方式(常用)
1.默认为nowrap
2.wrap：允许换行（常用）
3.wrap-reverse:反向换行(不常用)
5.align-content:flex-多行排列方式， 如果flex-wrap为不允许换行，则该属性无效(不常用)
默认为stretch：轴线占满整个交叉轴
flex-start:与交叉轴起点对齐
flex-end:与交叉轴的重点对齐
center：与交叉轴中点对齐
space-between:两端对齐，中间间隔平均分
space-around：间距相等
以下是给子元素设置的属性：
注意：flex的优先级高于width
最后附上思维导图：
下午用伸缩布局写了一个首页案例
