u

code/g3soft-libs/docs/examples/grid/flex.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+// flex：数字表示 flex-grow，也可传完整 flex 简写；常用于「一侧固定、一侧自适应」
+import { G3Col, G3Row, G3Space } from '@g3soft/ui'
+</script>
+
+<template>
+  <G3Space direction="vertical" :size="20" style="display: flex">
+    <G3Row :gutter="12">
+      <G3Col :flex="'0 0 200px'"><div class="cell">固定 200px</div></G3Col>
+      <G3Col :flex="1"><div class="cell">自适应剩余空间</div></G3Col>
+    </G3Row>
+
+    <G3Row :gutter="12">
+      <G3Col :flex="1"><div class="cell">1 份</div></G3Col>
+      <G3Col :flex="2"><div class="cell">2 份</div></G3Col>
+      <G3Col :flex="1"><div class="cell">1 份</div></G3Col>
+    </G3Row>
+  </G3Space>
+</template>
+
+<style scoped>
+.cell {
+  padding: 12px 0;
+  border-radius: 6px;
+  background: rgba(24, 24, 27, 0.04);
+  font-size: 13px;
+  text-align: center;
+}
+</style>