一、主轴方向
flex布局中,默认沿着水平方向排列
flex-direction: row ; (默认 行,水平)
flex-direction: column ; (列,垂直)
flex-direction: row-reverse; (行,从右到左)
flex-direction: column-reverse; (列,从下到上)
二、弹性盒子换行与多行侧轴居中
弹性盒子换行
flex-wrap:wrap; (强制换行)
默认不换行 no wrap
多行侧轴居中
/* 多行侧轴盒子居中 */
align-content: center;
/* 多行侧轴盒子从上往下排列 */
align-content: flex-start;
/* 多行侧轴盒子从下往上排列 */
align-content: flex-end;
/* 多行侧轴盒子侧轴靠边对齐 */
align-content: space-between;
/* 多行侧轴盒子侧轴1:2垂直对齐 */
align-content: space-around;
/* 多行侧轴盒子侧轴1:1垂直对齐 */
align-content: space-evenly;
一般flex-wrap和多行侧轴盒子配套使用
三、2x3x精灵图
- 在测量软件中 选择 2x或3x进行测量,视情况而定
- 利用background-size缩放背景图片:
background-size:xxpx auto;
宽度可以缩放,高度不能缩放,因为缩放后整个大图会发生变化,所以一般让高度自适应