u

code/container-ocr/ocr-vue/src/styles/mixins.scss

@@ -0,0 +1,56 @@
+@mixin flexGapRow($size) {
+  gap: $size;
+  & > * {
+    margin-right: $size;
+  }
+  & > *:last-child {
+    margin-right: 0;
+  }
+}
+
+@mixin flexGapColumn($size) {
+  gap: $size;
+  & > * {
+    margin-bottom: $size;
+  }
+  & > *:last-child {
+    margin-bottom: 0;
+  }
+}
+
+/**
+ * 兼容低版本浏览器的 Flex Wrap 布局 Mixin
+ * 支持浏览器：自动检测 gap 支持，不支持时回退到负边距方案
+ * @param {number} $row-gap - 行间距
+ * @param {number} $column-gap - 列间距
+ * @param {string} $direction: row - 布局方向 (row|column)
+ */
+@mixin flexGapWrap($row-gap, $column-gap, $direction: row) {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: $direction;
+
+  // 现代浏览器：直接使用 gap
+  @supports (gap: 1px) {
+    gap: $row-gap $column-gap;
+  }
+
+  // 低版本浏览器回退方案
+  @supports not (gap: 1px) {
+    @if $direction == row {
+      // 横向布局：用负边距补偿
+      margin: -$row-gap / 2 (-$column-gap / 2);
+
+      & > * {
+        margin: $row-gap / 2 $column-gap / 2;
+      }
+    } @else {
+      // 纵向布局
+      margin: (-$row-gap / 2) (-$column-gap / 2);
+
+      & > * {
+        margin: $row-gap / 2 $column-gap / 2;
+      }
+    }
+  }
+}