常用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;}//占据100%空间 .flex_1 {     flex: 1;}// 禁止换行.space{     white-space: nowrap;     overflow: hidden;     word-break: break-all;     text-overflow: ellipsis;}

本文章由javascript技术分享原创和收集