使用flex-wrap:wrap;实现弹性盒子多行排列效果
| 属性值 | 描述 |
|---|---|
| nowrap | 默认值,规定灵活的项目不拆行或不拆列 |
| wrap | 规定灵活的项目在必要的时候拆行或拆列 |
| wrap-reverse | 规定灵活的项目在必要的时候拆行或拆列,但是以相反的顺序 |
| initial | 设置该属性为它的默认值 |
| inherit | 从父元素继承该属性 |
调整行的对齐方式 align-content 取值与justify-content基本相同
| 属性值 | 作用 |
|---|---|
| flex-start | 默认值,起点开始依次排列flex-and |
| flex-and | 终点开始依次排列 |
| center | 沿主轴居中排列 |
| space-around | 每个盒子左右都有缝隙 2倍，空白间距均分在弹性盒子两侧 |
| space-between | 两侧没有缝隙，空白间距均分在相邻盒子之间 |
| space-evenly | 空隙一样大, 弹性盒子与容器之间间距相等 |
改变元素排列方向flex-direction
| 属性值 | 作用 |
|---|---|
| row | 行,水平(默认值) |
| column | 列,垂直 |
| row-reverse | 行,从右向左 |
| column-reverse | 列,从下向上 |
