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.

258 lines
3.8 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

// .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
}