// flex适配
.flex {
display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
display: -moz-box; /* Firefox 17- */
display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
display: -moz-flex; /* Firefox 18+ */
display: -ms-flexbox; /* IE 10 */
}
/*伸缩流方向*/
.flex-direction_column {
-webkit-box-orient: vertical;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
/*主轴对齐*/
.justify-content_flex-center {
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
.justify-content_flex-end {
-webkit-box-pack: end;
-ms-flex-pack: end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
.justify-content_flex-justify {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
}
/*侧轴对齐*/
.align-items_flex-start {
-webkit-box-align: start;
-ms-flex-align: start;
-webkit-align-items: flex-start;
align-items: flex-start;
}
.align-items_flex-end {
-webkit-box-align: end;
-ms-flex-align: end;
-webkit-align-items: flex-end;
align-items: flex-end;
}
.align-items_center {
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.align-items_baseline {
-webkit-box-align: baseline;
-ms-flex-align: baseline;
-webkit-align-items: baseline;
align-items: baseline;
}
/*伸缩性*/
.flex_auto {
-webkit-box-flex: 1;
-ms-flex: auto;
-webkit-flex: auto;
flex: auto;
}
.flex_1 {
width: 0;
-webkit-box-flex: 1;
-ms-flex: 1;
-webkit-flex: 1;
flex: 1;
}
/*显示顺序*/
.order_2 {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
}
.order_3 {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 3;
-webkit-order: 3;
order: 3;
}
// 计算
.heightcalc(@val) {
/*Firefox*/
height: -moz-calc(~'@{val}') !important;
/*chrome safari*/
height: -webkit-calc(~'@{val}') !important;
/*Standard */
height: calc(~'@{val}') !important;
}
.mainheight(@val) {
height: calc(~'@{val}' - @headerheight) !important;
}
.widthcalc(@val) {
/*Firefox*/
width: -moz-calc(~'@{val}') !important;
/*chrome safari*/
width: -webkit-calc(~'@{val}') !important;
/*Standard */
width: calc(~'@{val}') !important;
}
.maxheightcalc(@val) {
/*Firefox*/
max-height: -moz-calc(~'@{val}') !important;
/*chrome safari*/
max-height: -webkit-calc(~'@{val}') !important;
/*Standard */
max-height: calc(~'@{val}') !important;
}
// 隐藏滚动条
.hide_scrollbar {
-ms-overflow-style: none; // ie 10+
scrollbar-width: none; // firefox
// chrome 和Safari
&::-webkit-scrollbar {
height: 0 !important;
}
}
// 单行省略
.text_line {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/**
* 多行省略(容器可以不设置高度)
* webpack编译时,autoprefixer会将-webkit-box-orient属性省略,必须采用黑科技克服
*
* @lineNum 行数
*/
.text-lines(@lineNum) {
display: -webkit-box;
// autoprefixer: ignore next;
-webkit-box-orient: vertical;
-webkit-line-clamp: @lineNum;
overflow: hidden;
text-overflow: ellipsis;
}
// IOS滑动
.iosscroll {
-webkit-overflow-scrolling: touch; // IOS
&::-webkit-scrollbar {
display: none;
}
}
公共样式记录
最新推荐文章于 2024-04-07 09:44:09 发布
本文介绍了如何在现代浏览器中使用flex布局进行响应式设计,包括flex-direction属性的不同方向、justify-content和align-items的对齐方式,以及关键的伸缩性和顺序控制。同时涵盖了高度和宽度计算、滚动条隐藏、文本省略等实用技巧。
摘要由CSDN通过智能技术生成