flex布局
display: flex;
//水平
flex-direction: row;(默认）
flex-direction: row-reverse;(水平反向）
//垂直
flex-direction: column;
flex-direction: column-reverse;(垂直反向）
//收缩比例
flex-shrink: 0;(默认为0)
//扩展比例
flex-grow: 0;(默认为0)
//换行
flex-wrap: nowrap;(单行）
flex-wrap: wrap;(宽度不够自动换行）
flex-wrap: wrap-reverse;(换行并反向）
//水平对齐（flex-direction: column;则相反）
justify-content: flex-strat;(左对齐)
justify-content: flex-end;(右对齐)
justify-content: center;(居中对齐)
justify-content: space-between;(两端对齐（之间距离相等）)
justify-content: space-around;(两侧距离相等)
//垂直对齐（flex-direction: column;则相反）
align-items: flex-strat;(起点对齐)
align-items: flex-end;(终点对齐)
align-items: center;(中点对齐)
align-items: baseline;(基线对齐)
align-items: stretch;(默认)
//多行对齐（flex-direction: column;则相反）
align-content: flex-strat;(左对齐)
align-content: flex-end;(右对齐)
align-content: center;(中点对齐)
align-content: space-between;(两端对齐（之间距离相等）)
align-content: space-around;(两侧距离相等)
align-content: stretch;(默认)
//单个对齐（flex-direction: column;则相反）
align-self: auto;(默认）
align-self: flex-strat;(起点对齐)
align-self: flex-end;(终点对齐)
align-self: center;(中点对齐)
align-self: baseline;(基线对齐)
（总宽度-自适应宽度总和）/个数+自适应宽度（单个）
