flex 布局 常用class 复制即可使用

推荐常用flex布局

/*复制到公共样式文件中即可使用*/

/*盒模型*/

.flex {

    display: flex;

}

/* 纵向排列 */

.flex_d_c {

    flex-direction: column;

}

/* 横向居中对齐 */

.flex_j_c {

    justify-content: center;

}

/* 自适应间距 */

.flex_sx {

    justify-content: space-around;

}

/* 横向左右对齐 */

.flex_rl{

    justify-content: space-between;

}

/*横向 左对齐 */

.flex_j_l {

    justify-content: flex-start;

}

/* 横向右对齐 */

.flex_j_r {

    justify-content: flex-end;

}

/* 纵向居中对齐 */

.flex_a_c {

    align-items: center;

}

/* 纵向向下对齐 */

.flex_a_e{

    align-items: flex-end;

}

/* felx 盒子中的项目 占据宽度 各占一半 */

.flex_1 {

    flex: 1;

}

/* 禁止换行 */

.space{

    white-space: nowrap;

    overflow: hidden;

    word-break: break-all;

    text-overflow: ellipsis;

}