弹性布局盒子

// 基础配置
.base-flex {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
}

// 设置为弹性布局
.flex-box {
    @extend .base-flex;
}

// 设置弹性布局水平方向自动换行
.flex-wrap {
    @extend .base-flex;
    flex-wrap: wrap;
}

// 设置弹性布局为垂直方向
.flex-column {
    @extend .base-flex;
    flex-direction: column;
}

// 设置弹性布局水平方向两侧对齐
.flex-between {
    @extend .base-flex;
    justify-content: space-between;
}

// 设置弹性布局两侧对齐均匀分布空间
.flex-around {
    @extend .base-flex;
    justify-content: space-around;
}

// 设置弹性布局水平垂直居中
.flex-center {
    @extend .base-flex;
    justify-content: center;
    align-items: center;
}

// 设置弹性布局水平方向右对齐
.flex-end {
    @extend .base-flex;
    justify-content: flex-end;
}

// 设置弹性布局水平方向左对齐
.flex-start {
    @extend .base-flex;
    justify-content: flex-start;
}