flex布局
- 1.以容器(父元素)为单位
- 2.开启flex时，容器内的元素默认水平排序
- 3.主轴(x、水平) ，侧轴(y、垂直)
- 4.不脱离文档流
- 5.主轴方向长度默认丢失，侧轴长度默认100%
- 6.flex中的块、行内、行内块元素都会变成不独占一行的块元素
- 7.元素溢出时压缩，不换行
给父元素设置的属性:
flex-direction:
- flex-direction:row; 默认从左到右(行排列、水平、x轴)
- flex-direction:row-reverse;(从右到左排序)
- flex-direction:column;从上到下(列排列、垂直、y轴)
- flex-direction:column-reverse;从下到上
justify-content:设置水平对齐方式
justify-content: center; 居中
justify-content: flex-start; 默认，开始位置(页面最左👈边是开始位置)
justify-content: flex-end; 结束位置(页面的最右👉边是结束位置)
justify-content: space-around; 环绕对齐，中间空白区域一致，两端空白区域一致
justify-content: space-between; 环绕对齐，元素往左右分布，两端不留空，中间空白区域一致
justify-content: space-evenly; 环绕对齐，空白区域平分
flex-wrap:设置换行
flex-wrap:nowrap; 默认，不换行，溢出挤压
flex-wrap:wrap; 换行，当父元素设置高度时，会在空白区域居中，不设高度时
flex-wrap:wrap-reverse; 反方向换行
align-items:垂直
align-items:center; 垂直居中
align-items:flex-start; 上对齐
align-items:flex-end; 下对齐
给子容器设置的属性
flex:0-1; 元素空白区域占比，所有子元素设1时平分空白区域
align-self:center;(单独设置侧轴的对齐方式)
flex-shrink:0~1;设置元素的扩展比，(算法:原宽度+(空白区域÷份数x所占份数))
flex-shrink：1;设置元素的缩小比，默认1，0表示不缩小
order: 1 ; 默认为0，设置元素排列顺序，值越大排越后，默认标签书写顺序排列 (缺点:1.占网速 2.不兼容ie9以下的浏览器 3.flex容器的子元素设置有float、clear无效)
