你必须知道的flex伸缩布局

伸缩布局：
display:flex;让大盒子成为容器，容器有主轴和侧轴；
子盒子是容器的项目，项目默认会从主轴的起点沿主轴的方向依次排列，如果超过容器，则会自动收缩，不换行 所以一定要注意当前主轴的起点在什么地方

容器的6个属性：写在容器的css里
—1---
flex-direction控制主轴的方向：
row→：默认值，主轴呈现水平方向从左往右
column↓：主轴呈现垂直方向从上往下，项目会垂直排列，侧轴会变成水平方向从右往左
row-reverse← 主轴呈现水平方向从右往左，项目的排列也会反过来
row：默认值，主轴呈现水平方向从左往右
column-reverse↑ 主轴呈现垂直方向从下往上，项目的排列也会反过来
—2---
justify-content： 控制项目在主轴的对齐方式，是项目整体对齐，不会颠倒项目的位置和次序
flex-start：以主轴的起点对齐
flex-end：以主轴的终点对齐
center：居中对齐
space-between 沿主轴两端对齐
space-round：环绕对齐，每个项目的左右间隙的距离相同
—3---
flex-wrap：控制项目是否换行
no-wrap不换行，默认值
wrap换行
wrap-reverse 反着换行。第一行在下面
—4---
flex-flow：默认值row nowrap，是flex-direction和flex-wrap两种属性的简写
—5---
align-items：控制项目在侧轴单行情况下的对齐方式，如果是多行，则不起作用
flex-start：侧轴的起点对齐，不是默认值
flex-end：侧轴的终点对齐
center：侧轴的中点对齐
没有两端对齐和围绕对齐，因为是单行
stretch：默认值，如果项目有height，该属性的拉伸效果没有，如果没有设置高度，则回让项目的高度和容器的高度保持一致
—6---
align-content：定义了多行在侧轴的对齐方式，如果项目是单行，则不起作用
flex-start：侧轴的起点对齐，不是默认值
flex-end：侧轴的终点对齐
center：侧轴的中点对齐，居中对齐
没有两端对齐和围绕对齐，因为是单行
space-between 沿侧轴两端对齐
space-round：环绕对齐，每个项目的上下间隙的距离相同
stretch：默认值，如果项目自身有高度，，则拉伸效果是没有的，但是排列的位置还是在轴线的最顶端

项目的属性：
—1---
order：设置项目间的排序
默认值是0，值越小，越靠前
—2---
flex-grow：定义项目的放大比例，
默认值是0，即使有剩余空间也不会放大
1，将剩余空间均分，
将项目的flex-grow属性值相加，就是将剩余空间分成几份，根据每个项目所设的flex-grow值，来判断每个项目在剩余空间里面占几份
—3---
flex-shrink：定义项目的缩小比例，
默认值是1 一旦超出容器，自动缩小
0 就是不缩小
负值对该属性无效
—4---
flex-basis：官方认证的宽度属性
默认值是auto
像素，百分比，设置多少，项目的宽度就是多少，就算项目本身设置了width，也没有效果，也就是比width的权重高
—5---
flex 是flex-grow、felx-shrink、flex-basis三者的简写
—6---
align-self：是对align-items的补充，允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items
属性值和align-items一样

参考：阮一峰 flex布局教程