New file |
| | |
| | | // .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-flex-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 |
| | | } |
| | | |