flex.css

.flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
}

.inline-flex {
    /* 内敛元素 */
    display: inline-flex;
}

.flex-item {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}

/* 容器上 start*/

.direction-row {
    /* (默认)主轴为水平方向，起点在左端 */
    flex-direction: row;
}

.direction-row-reverse {
    /* 主轴为水平方向，起点在右端 */
    flex-direction: row-reverse;
}

.direction-column {
    /* 主轴为垂直方向，起点在上沿 */
    flex-direction: column;
}

.direction-column-reverse {
    /* 主轴为垂直方向，起点在下沿。*/
    flex-direction: column-reverse;
}

.flex-nowrap {
    /* flex不换行 */
    flex-wrap: nowrap;
}

.flex-wrap {
    /* flex第一行在上方 */
    flex-wrap: wrap;
}

.flex-wrap-reverse {
    /* flex第一行在下方 */
    flex-wrap: wrap-reverse;
}

/* justify 横向对齐方式 */

.justify-start {
    /* 左对齐 */
    justify-content: flex-start;
}

.justify-end {
    /* 右对齐 */
    justify-content: flex-end;
}

.justify-center {
    /* 居中 */
    justify-content: center;
}

.justify-between {
    /* 等宽排列 */
    justify-content: space-between;
}

.justify-around {
    /*  分散排列*/
    justify-content: space-around;
}

/* align 上下对齐方式 */

.align-start {
    /* 上对齐 */
    align-items: flex-start;
}

.align-end {
    /* 下对齐 */
    align-items: flex-end;
}

.align-center {
    /* 上下居中 */
    align-items: center;
}

.align-baseline {
    /* 项目的第一行文字的基线对齐 */
    align-items: baseline;
}

.align-stretch {
    /* 如果项目未设置高度或设为auto，将占满整个容器的高度。 */
    align-items: stretch;
}

/* 容器上 end*/

/* 项目上start */

.align-self-auto {
    /* 继承父元素排列方式 */
    align-self: auto;
}

.align-self-start {
    /* 上对齐 */
    align-self: flex-start;
}

.align-self-end {
    /* 下对齐 */
    align-self: flex-end;
}

.align-self-center {
    /* 上下居中 */
    align-self: center;
}

.align-self-baseline {
    /* 项目的第一行文字的基线对齐 */
    align-self: baseline;
}

.align-self-stretch {
    /* 如果项目未设置高度或设为auto，将占满整个容器的高度。 */
    align-self: stretch;
}

/* 项目上end */