pad-app/style/css/flex-main.css

107 lines
1.9 KiB
CSS

/*单行文本溢出省略号*/
.one-t {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
transition: all linear 0.2s;
}
/*多行文本溢出省略号*/
.more-t {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
transition: all linear 0.2s;
}
/* ==================
flex布局(colorui里面也有相关基础样式)
==================== */
/* 多行排列 */
.x-more{
display: flex;
flex-direction: row;
flex-wrap: wrap;
text-align: center;
}
/* x水平排列*/
.x-f {
display: flex;
align-items: center;
}
/*x两端且水平居中*/
.x-bc {
display: flex;
justify-content: space-between;
align-items: center;
}
/*x平分且水平居中*/
.x-ac {
display: flex;
justify-content: space-around;
align-items: center;
}
.x-sc {
display: flex;
justify-content: space-evenly;
align-items: center;
}
/*x水平靠上对齐*/
.x-start {
display: flex;
align-items: flex-start;
}
/*x水平靠下对齐*/
.x-end {
display: flex;
align-items: flex-end;
text-align: end;
}
/*上下左右居中*/
.x-c {
display: flex;
justify-content: center;
align-items: center;
}
/*y竖直靠左*/
.y-start {
display: flex;
flex-direction: column;
align-items: flex-start;
}
/*y竖直靠右*/
.y-end {
display: flex;
flex-direction: column;
align-items: flex-end;
}
/*y竖直居中*/
.y-f {
display: flex;
flex-direction: column;
align-items: center;
}
/* y竖直两端 */
.y-b {
display: flex;
flex-direction: column;
justify-content: space-between;
}
/*y竖直两端居中*/
.y-bc {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.y-sc{
display: flex;
flex-direction: column;
justify-content: space-evenly;
}