作为一个后端开发人员，想自己动手做一些东西出来，必须要懂前端的一些东西呀。本次为大家带来非常好用的一个CSS 布局属性。该属性是写在父容器上的，用来影响子容器的。
一、写在父容器上，作用于子容器的属性
1、flex-direction 排列方式（横向，竖直）
| 值 | 效果 |
|---|---|
| row | 横向，默认值 |
| row-reverse | 横向，但是方向和上面相反 |
| column | 竖直 |
| column-reverse | 竖直，但是方向和上面相反 |
2、flex-wrap 是否允许元素换行
| 值 | 效果 |
|---|---|
| nowrap | 默认值，元素保持在一行 |
| wrap | 根据宽度自动换行 |
| wrap-reverse | 自动换行但是与上面相反 |
3、align-items 子容器上下的变化
| 值 | 效果 |
|---|---|
| stretch | 默认值；在不指定子容器具体高度时，拉伸至容器高度 |
| center | 垂直居中 |
| flex-start | 子容器移动到父容器的头部位置 |
| flex-end | 子容器移动到父容器的尾部位置 |
| baseline | 子容器保持一条线 |
4、justify-content 子容器左右变化
| 值 | 效果 |
|---|---|
| flex-start | 默认，子容器居父容器的左侧 就是开始位置 |
| flex-end | 子容器处于父容器的右侧，即 结束位置 |
| center | 水平居中 |
| space-between | 两侧容器分别接触左侧与右侧，中间留空 |
| space-around | 容器之间都有间隔，不接触左侧与右侧 |
