弹性盒子换行

特性： 给父亲添加了 display: flex; 所有的子盒子（弹性盒子）都会在一行显示，不会自动换行。

弹性盒子换行显示 : flex-wrap:

语法：

flex-wrap: wrap;

 设置侧轴对齐

---

注意

1. 此处设置侧轴多行的垂直对齐方式。 align-content（少）

2. 和前面学过的 align-items （侧轴单行垂直对齐） （多）

3. align 垂直 比如 align-items 垂直对齐 align-content 多行垂直对齐

4. content 主轴 justify-content align-content 侧轴多行对齐

align-content：center；

属性	作用
flex-start	默认值，起点开始依次排列
fles-end	终点开始依次排列
center	沿主轴居中排列
space-arount	弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧
space-between	弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间

flex 总结梳理

---

flex 他是一种布局方式。主要目的是通过父盒子控制子盒子如何排列，一定是亲爸爸和亲儿子

主轴排列方式

默认水平，但是可以转换

1、如果给父盒子添加 display: flex

 

2、justify-content: center;

 

3、justify-content: space-between; 左右两侧无缝隙

 

4、justify-content: space-around; 两倍关系

 

5、justify-content: space-evenly; 缝隙均等