笔记wormcms flex布局

丶小白菜丬

于 2020-10-21 14:16:16 发布

阅读量84

点赞数

本文链接：https://blog.csdn.net/weixin_42596430/article/details/109200131

版权

.cx-fex,.cx-fex-c,.cx-fex-l,.cx-fex-r,.cx-fex-a {display:-webkit-flex;display:flex;display:-moz-flex;flex-direction:row;-ms-flex-direction:row;-webkit-flex-direction:row;flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;justify-content:flex-start;-webkit-justify-content:flex-start;}
.cx-fex {justify-content:space-between;-webkit-justify-content:space-between}
.cx-fex-c {justify-content:center;-webkit-justify-content:center}
.cx-fex-r {justify-content:flex-end;-webkit-justify-content:flex-end}
.cx-fex-a {justify-content:space-around;-webkit-justify-content:space-around}
/* 多线轴居中 */
.cx-fex-contc {align-content:center;-webkit-align-content:center}
/* 多线轴顶部对齐 */
.cx-fex-contr {align-content:flex-start;-webkit-align-content:flex-start}
/* 多线轴两端对齐 */
.cx-fex-contsb {align-content:space-between;-webkit-align-content: space-between}
/* 多线轴平均分布 */
.cx-fex-contsa {align-content:space-around;-webkit-align-content:space-around}
/* 横排不换行 */
.cx-flex-rno {flex-flow:row nowrap;-webkit-flex-flow:row nowrap;}
/* 竖排不换行 */
.cx-flex-cno {flex-flow:column nowrap;-webkit-flex-flow:column nowrap;}
/* 横排反向换行 */
.cx-flex-rrw {flex-flow:row-reverse wrap-reverse;-webkit-flex-flow:row-reverse wrap-reverse;}
/* 竖排反向换行 */
.cx-flex-crw {flex-flow:column wrap-reverse;-webkit-flex-flow:column wrap-reverse;}
/* 竖排 */
.cx-fex-column {flex-direction:column;-webkit-flex-direction:column;-ms-flex-direction:column}
/* 反向排列 */
.cx-fexre-row {flex-direction:row-reverse;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse}
/*  反向竖排 */
.cx-fexre-column {flex-direction:column-reverse;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse}
/* 不换行 */
.cx-fex-nowrap {flex-wrap:nowrap;-ms-flex-wrap:nowrap;-webkit-flex-wrap:nowrap}
/* 反向换行 */
.cx-fex-rewrap {flex-wrap:wrap-reverse;-ms-flex-wrap:wrap-reverse;-webkit-flex-wrap:wrap-reverse}
/* 交叉上对齐 */
.cx-fex-itemst{align-items:flex-start;-webkit-align-items: flex-start}
/* 交叉剧中对齐 */
.cx-fex-itemsc{align-items:center;-webkit-align-items: center}
/* 交叉底部对齐 */
.cx-fex-itemsb{align-items:flex-end;-webkit-align-items: flex-end}
/* 交叉第一行文字对齐 */
.cx-fex-itemsl{align-items:baseline;-webkit-align-items: baseline}