33 lines
908 B
Vue
33 lines
908 B
Vue
<script setup lang="ts">
|
||
// align 控制交叉轴，justify 控制主轴分布
|
||
import { G3Col, G3Row, G3Space } from '@g3soft/ui'
|
||
</script>
|
||
|
||
<template>
|
||
<G3Space direction="vertical" :size="20" style="display: flex">
|
||
<G3Row :gutter="12" align="middle" justify="space-between" style="height: 80px">
|
||
<G3Col :span="6"><div class="cell">span 6</div></G3Col>
|
||
<G3Col :span="6"><div class="cell tall">span 6（更高）</div></G3Col>
|
||
<G3Col :span="6"><div class="cell">span 6</div></G3Col>
|
||
</G3Row>
|
||
|
||
<G3Row :gutter="12" justify="center">
|
||
<G3Col :span="6"><div class="cell">居中</div></G3Col>
|
||
<G3Col :span="6"><div class="cell">居中</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;
|
||
}
|
||
.tall {
|
||
padding: 28px 0;
|
||
}
|
||
</style>
|