.flex {

    display: flex;
}

/* 纵向排列 */
.flex2 {
    display: flex;
    flex-direction: column;
}

/* 水平居中,垂直居中 */
.fcc {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 两端对齐 */
.jc-sb {
    justify-content: space-between;
}

/* 分散对齐 */
.jc-sa {
    justify-content: space-around;
}

.jc-fs {
    justify-content: flex-start
}

/* 垂直居中 */
.aic {
    align-items: center;
}

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

.ai-fs {
    align-items: flex-start
}
/* 分配剩余空间 */
.fg1 {
    flex-grow: 1;
}
.w100pc{
    width: 100%;
}