flex布局常用布局

1. 项目水平居中，横排，项目高度就是容器高度

justify-content: center;

2. 项目水平居中，项目置顶，项目从左到右顺序排列，横排，项目高度是自身的高度（不充满容器高度）

justify-content: center;
align-items: baseline;（align-items: flex-start;）

3. 全部项目水平、垂直居中，项目从左到右顺序排列，横排，项目高度是自身的高度（不充满容器高度）

justify-content: center;
align-items: baseline;

4. 全部项目水平居中，项目置底，项目从左到右顺序排列，横排，项目高度是自身的高度（不充满容器高度）

justify-content: center;
align-items: flex-end;

5. 全部项目水平、垂直居中，项目从上到下顺序排列，竖排，项目宽度是自身的宽度（不充满容器宽度）

justify-content: center;
align-items: center;
flex-direction: column;

6. 全部项目水平、垂直居中，项目从下到上顺序排列，竖排，项目宽度是自身的宽度（不充满容器宽度）

justify-content: center;
align-items: center;
flex-direction: column;

7. 全部项目水平、垂直居中，项目从左到右顺序排列，横排，项目高度、宽度是自身的高度、宽度

justify-content: center;
align-items: flex-end;
flex-direction: row;

8. 全部项目水平、垂直居中，项目从右到左顺序排列，横排，项目高度、宽度是自身的高度、宽度

justify-content: center;
align-items: flex-end;
flex-direction: row-reverse;