bugfix:flex-colum

chen-jiawei · Apr 3, 2022 · 85f8b01 · 85f8b01
1 parent a166f38
commit 85f8b01
Showing 1 changed file with 104 additions and 104 deletions.
diff --git a/uni_modules/uview-ui/libs/css/flex.scss b/uni_modules/uview-ui/libs/css/flex.scss
@@ -25,231 +25,231 @@
 // 	@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;
-}
-
+
+
+// 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-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-margin-top-auto,
 .u-m-t-auto {
 	margin-top: auto !important
 }
 
-.u-margin-right-auto,
+.u-margin-right-auto,
 .u-m-r-auto {
 	margin-right: auto !important
 }
 
-.u-margin-bottom-auto,
+.u-margin-bottom-auto,
 .u-m-b-auto {
 	margin-bottom: auto !important
 }
 
-.u-margin-left-auto,
+.u-margin-left-auto,
 .u-m-l-auto {
 	margin-left: auto !important
 }
 
-.u-margin-center-auto,
+.u-margin-center-auto,
 .u-m-c-auto {
 	margin-left: auto !important;
 	margin-right: auto !important
 }
 
-.u-margin-middle-auto,
+.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;
-}
-
-// 主轴起点对齐
+}
+/* #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