Web移动端-part04(切换主轴)

一、主轴方向

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;

宽度可以缩放，高度不能缩放，因为缩放后整个大图会发生变化，所以一般让高度自适应