​

• 主轴方向改变:

1. 属性名:flex-direction
2. 主轴方向默认是水平方向,侧轴默认是垂直方向

​

编辑

/*  主轴是X轴,侧轴是Y轴 */
flex-direction：column;

• 计算精灵图:

精灵图的宽度/装精灵图盒子的宽度=倍数

• 弹性盒子换行:

1. 属性值:flex-warp:()
2. warp换行 no warp不换行
3. 特性:给父亲添加了 display: flex; 所有的子盒子（弹性盒子）都会在一行显示，不会自动换行。

• 设置侧轴多行对齐方式:

1. 属性:align-content()
2. 基本与justify-content取值相同.

​

编辑

aligin-content:center;

总结:

主轴排列方式:

• 如果给父盒子添加 display: flex

​

编辑

• justify-content: center;

​

编辑

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

​

编辑

• justify-content: space-around; 两倍关系

​

编辑

• justify-content: space-evenly; 缝隙均等

​编辑

侧轴对齐方式:

• align-items: center;

​

编辑

侧轴对齐方式-多行

• align-content: space-between;

​

编辑

• align-content: space-around;

​

编辑

• align-content: space-evenly;

​

编辑

• align-content: center;

​

编辑

​