常用flex布局
2020-05-07 本文已影响0人
嵩鼠
/*复制到公共样式文件中即可使用*/
/*盒模型*/
.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;
}
