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;(基线对齐)

（总宽度-自适应宽度总和）/个数+自适应宽度（单个）