// 自定义flex布局class。vant-ui的布局默认带有flex-wrap,且有其他干扰,干脆自己定义 .flex { display: flex; align-content: flex-start; // 侧轴方向 行与行的对齐 align-items: center; // 侧轴方向 行内item的对齐 &.column { flex-direction: column; // 定义主轴方向 } &.row { flex-direction: row; // 定义主轴方向 } &.wrap { flex-wrap: wrap; } /* 主轴方向 item的对齐 */ &.around { justify-content: space-around; } &.between { justify-content: space-between; } &.center { justify-content: center; } &.end { justify-content: flex-end; } &.baseline { align-items: baseline; } &.start { align-items: flex-start; } &.stretch { align-items: stretch; } } .flex-auto { flex: auto; }