移动web(Flex布局 主轴方向,盒子换行)

• 主轴方向改变:

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;