You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
257 lines
3.8 KiB
257 lines
3.8 KiB
// .u-flex { |
|
// @include vue-flex(row); |
|
// } |
|
|
|
// .u-flex-x { |
|
// @include vue-flex(row); |
|
// } |
|
|
|
// .u-flex-y { |
|
// @include vue-flex(column); |
|
// } |
|
|
|
// .u-flex-xy-center { |
|
// @include vue-flex(row); |
|
// justify-content: center; |
|
// align-items: center; |
|
// } |
|
|
|
// .u-flex-x-center { |
|
// @include vue-flex(row); |
|
// justify-content: center; |
|
// } |
|
|
|
// .u-flex-y-center { |
|
// @include vue-flex(column); |
|
// justify-content: center; |
|
// } |
|
|
|
|
|
// flex布局 |
|
.u-flex, |
|
.u-felx-row, |
|
.u-flex-x { |
|
@include flex; |
|
} |
|
|
|
.u-flex-y, |
|
.u-flex-column { |
|
@include flex('column'); |
|
} |
|
|
|
.u-flex-x-center { |
|
@include flex; |
|
justify-content: center; |
|
} |
|
|
|
.u-flex-xy-center { |
|
@include flex; |
|
justify-content: center; |
|
align-items: center; |
|
} |
|
|
|
.u-flex-y-center { |
|
@include flex; |
|
align-items: center; |
|
} |
|
|
|
.u-flex-x-left { |
|
@include flex; |
|
} |
|
|
|
.u-flex-x-reverse, |
|
.u-flex-row-reverse { |
|
flex-direction: row-reverse; |
|
} |
|
|
|
.u-flex-y-reverse, |
|
.u-flex-column-reverse { |
|
flex-direction: column-reverse; |
|
} |
|
|
|
/* #ifndef APP-NVUE */ |
|
// 此处为vue版本的简写，因为nvue不支持同时作用于两个类名的样式写法 |
|
// nvue下只能写成class="u-flex-x u-flex-x-reverse的形式" |
|
.u-flex.u-flex-reverse, |
|
.u-flex-row.u-flex-reverse, |
|
.u-flex-x.u-flex-reverse { |
|
flex-direction: row-reverse; |
|
} |
|
|
|
.u-flex-column.u-flex-reverse, |
|
.u-flex-y.u-flex-reverse { |
|
flex-direction: column-reverse; |
|
} |
|
|
|
// 自动伸缩 |
|
.u-flex-fill { |
|
flex: 1 1 auto |
|
} |
|
|
|
// 边界自动伸缩 |
|
.u-margin-top-auto, |
|
.u-m-t-auto { |
|
margin-top: auto !important |
|
} |
|
|
|
.u-margin-right-auto, |
|
.u-m-r-auto { |
|
margin-right: auto !important |
|
} |
|
|
|
.u-margin-bottom-auto, |
|
.u-m-b-auto { |
|
margin-bottom: auto !important |
|
} |
|
|
|
.u-margin-left-auto, |
|
.u-m-l-auto { |
|
margin-left: auto !important |
|
} |
|
|
|
.u-margin-center-auto, |
|
.u-m-c-auto { |
|
margin-left: auto !important; |
|
margin-right: auto !important |
|
} |
|
|
|
.u-margin-middle-auto, |
|
.u-m-m-auto { |
|
margin-top: auto !important; |
|
margin-bottom: auto !important |
|
} |
|
/* #endif */ |
|
|
|
// 换行 |
|
.u-flex-wrap { |
|
flex-wrap: wrap; |
|
} |
|
|
|
// 反向换行 |
|
.u-flex-wrap-reverse { |
|
flex-wrap: wrap-reverse; |
|
} |
|
|
|
// 主轴起点对齐 |
|
.u-flex-start { |
|
justify-content: flex-start |
|
} |
|
|
|
// 主轴中间对齐 |
|
.u-flex-center { |
|
justify-content: center |
|
} |
|
|
|
// 主轴终点对齐 |
|
.u-flex-end { |
|
justify-content: flex-end |
|
} |
|
|
|
// 主轴等比间距 |
|
.u-flex-between { |
|
justify-content: space-between |
|
} |
|
|
|
// 主轴均分间距 |
|
.u-flex-around { |
|
justify-content: space-around |
|
} |
|
|
|
// 交叉轴起点对齐 |
|
.u-flex-items-start { |
|
align-items: flex-start |
|
} |
|
|
|
// 交叉轴中间对齐 |
|
.u-flex-items-center { |
|
align-items: center |
|
} |
|
|
|
// 交叉轴终点对齐 |
|
.u-flex-items-end { |
|
align-items: flex-end |
|
} |
|
|
|
// 交叉轴第一行文字基线对齐 |
|
.u-flex-items-baseline { |
|
align-items: baseline |
|
} |
|
|
|
// 交叉轴方向拉伸对齐 |
|
.u-flex-items-stretch { |
|
align-items: stretch |
|
} |
|
|
|
|
|
// 以下属于项目(子元素)的类 |
|
|
|
// 子元素交叉轴起点对齐 |
|
.u-flex-self-start { |
|
align-self: flex-start |
|
} |
|
|
|
// 子元素交叉轴居中对齐 |
|
.u-flex-self-center { |
|
align-self: center |
|
} |
|
|
|
// 子元素交叉轴终点对齐 |
|
.u-flex-self-end { |
|
align-self: flex-end |
|
} |
|
|
|
// 子元素交叉轴第一行文字基线对齐 |
|
.u-flex-self-baseline { |
|
align-self: baseline |
|
} |
|
|
|
// 子元素交叉轴方向拉伸对齐 |
|
.u-flex-self-stretch { |
|
align-self: stretch |
|
} |
|
|
|
// 多轴交叉时的对齐方式 |
|
|
|
// 起点对齐 |
|
.u-flex-content-start { |
|
align-content: flex-start |
|
} |
|
|
|
// 居中对齐 |
|
.u-flex-content-center { |
|
align-content: center |
|
} |
|
|
|
// 终点对齐 |
|
.u-flex-content-end { |
|
align-content: flex-end |
|
} |
|
|
|
// 两端对齐 |
|
.u-flex-content-between { |
|
align-content: space-between |
|
} |
|
|
|
// 均分间距 |
|
.u-flex-content-around { |
|
align-content: space-around |
|
} |
|
|
|
// 全部居中对齐 |
|
.u-flex-middle { |
|
justify-content: center; |
|
align-items: center; |
|
align-self: center; |
|
align-content: center |
|
} |
|
|
|
// 是否可以放大 |
|
.u-flex-grow { |
|
flex-grow: 1 |
|
} |
|
|
|
// 是否可以缩小 |
|
.u-flex-shrink { |
|
flex-shrink: 1 |
|
} |
|
|
|
|