水平的主轴（main axis）和垂直的交叉轴（cross axis） 1.flex-direction 向右或向下排列
row 向右 | column 向下
row-reverse | column-reverse 反向
2.flex-wrap 换行
nowrap 不换 | wrap 自动换行 | wrap-reverse 第一行在最下面的换行
3.flex-flow是flex-direction和flex-wrap的简写，默认值为row nowrap
flex-flow: column wrap;
4.justify-content 左右方向的对齐方式
flex-start（默认值）：最左边
flex-end：最右边
center： 居中
space-between：最左和最右，两者之间间隔左右均分
space-around：项目之间间隔相等
5.align-items 上下方向对齐方式
flex-start（默认值）：最左边
flex-end：最右边
center： 居中
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
6.align-content 多行数据的上下对齐方式
flex-start：最左边
flex-end：最右边
center：居中
space-between：最左和最右，两者之间间隔左右均分
space-around：项目之间间隔相等
子集属性
1.order 越小排名越靠前
order: 0;
2.flex-grow 项目放大的比例
.item {
flex-grow: 0; /* default 0 */
}
3.flex-shrink 项目缩小比例
flex-shrink: 1; /* default 1 */
如果一个项目的flex-shrink属性为0，其他项目为默认值1时，则空间不足时，前者不缩小。
4.flex-basis 项目主轴的固定长度
flex-basis：350px
5.align-self 允许子文件和父文件的排列方式不同，会覆盖align-items
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
1.单项目
只有左上角一个点时，flex布局默认左对齐
display;flex;
居中对齐
display:flex;
justif-content:center
右对齐
display:flex;
justif-content: flex-end
交叉轴对齐
display: flex;
align-items: center;
垂直居中
display:grid;
place-items: center;
display:flex;
justif-content:center;
align-items: center;
垂直居中后再向下
display: flex;
justify-content: center;
align-items: flex-end;
右下角
display: grid;
place-content: end;
2.双项目
同行，分别为左右
display: flex;
justify-content: space-between;
同列，分别为上下
display: flex;
flex-direction: column;
justify-content: space-between;
垂直居中或最右，分别为上下
display: flex;
align-items: center;
flex-direction: column;
justify-content: space-between;
display: flex;
align-items: flex-end
flex-direction: column;
justify-content: space-between;
align-self的应用场景
.qwe{
width: 500px;
height: 500px;
background-color: #666666;
display: flex;
}
.asd{
width: 100px;
height: 100px;
background-color: pink;
}
.asd1{
width: 100px;
height: 100px;
background-color: pink;
align-self: center;
}
.asd{
width: 100px;
height: 100px;
background-color: pink;
align-self: flex-end;
}
align-content的应用场景
display:flex;
flex-warp:warp;
justify-content:flex-end;
align-content: space-between
display: flex;
flex-wrap: wrap;
align-content: space-between;
flex-basix的实际应用
