使用boostrap的思想，封装flex，使用类名，更快的布局

/* flex 布局 */

.flex {
    /* #ifndef APP-PLUS-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
}

.flex-row {
    flex-direction: row!important;
}

.flex-column {
    flex-direction: column!important;
}

.flex-row-reverse {
    flex-direction: row-reverse!important;
}

.flex-column-reverse {
    flex-direction: column-reverse!important;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

.justify-start {
    justify-content: flex-start;
}

.justify-end {
    justify-content: flex-end;
}

.justify-between {
    justify-content: space-between;
}

.justify-center {
    justify-content: center;
}

.align-center {
    align-items: center;
}

.align-stretch {
    align-items: stretch;
}

.align-start {
    align-items: flex-start;
}

.align-end {
    align-items: flex-end;
}

.content-start {
    align-content: flex-start;
}

.content-end {
    align-content: flex-end;
}

.content-center {
    align-content: center;
}

.content-between {
    align-content: space-between;
}

.content-around {
    align-content: space-around;
}

.content-stretch {
    align-content: stretch;
}

.flex-1 {
    flex: 1;
}

.flex-2 {
    flex: 2;
}

.flex-3 {
    flex: 3;
}

.flex-4 {
    flex: 4;
}

.flex-5 {
    flex: 5;
}

.flex-shrink {
    flex-shrink: 0;
}