gi-component

Appearance

Flex 弹性布局 ​

基于 CSS Flex 的布局组件，用于快速实现弹性盒子布局。

与 Space 组件的区别

Space 为内联元素提供间距，其本身会为每一个子元素添加包裹元素用于内联对齐。适用于行、列中多个子元素的等距排列。

Flex 为块级元素提供间距，其本身不会添加包裹元素。适用于垂直或水平方向上的子元素布局，并提供了更多的灵活性和控制能力。

主轴与交叉轴对齐 ​

通过 justify 和 align 分别控制主轴、交叉轴上的对齐方式。

Select justify:
Select align:
查看代码
vue
<template>
  <div>
    <el-form>
      <el-form-item label="Select justify:">
        <el-radio-group v-model="justify" size="small">
          <el-radio value="flex-start">flex-start</el-radio>
          <el-radio value="center">center</el-radio>
          <el-radio value="flex-end">flex-end</el-radio>
          <el-radio value="space-between">space-between</el-radio>
          <el-radio value="space-around">space-around</el-radio>
          <el-radio value="space-evenly">space-evenly</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="Select align:">
        <el-radio-group v-model="align" size="small">
          <el-radio value="flex-start">flex-start</el-radio>
          <el-radio value="center">center</el-radio>
          <el-radio value="flex-end">flex-end</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <gi-card bordered :header-style="{ display: 'none' }">
      <gi-flex :justify="justify" :align="align" :gap="4" :style="{ height: '120px' }">
        <el-button type="primary">Primary</el-button>
        <el-button type="primary">Primary</el-button>
        <el-button type="primary">Primary</el-button>
        <el-button type="primary">Primary</el-button>
      </gi-flex>
    </gi-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const justify = ref('flex-start')
const align = ref('flex-start')
</script>

设置间隙 ​

使用 gap 设置元素之间的间距, 预设了 small、middle、large 三种尺寸, 也可以自定义间距。

查看代码
vue
<template>
  <gi-card bordered :header-style="{ display: 'none' }">
    <el-radio-group v-model="gapType">
      <el-radio value="small">small</el-radio>
      <el-radio value="middle">middle</el-radio>
      <el-radio value="large">large</el-radio>
      <el-radio value="customize">customize</el-radio>
    </el-radio-group>
    <el-slider v-if="gapType === 'customize'" v-model="customGap" :min="0" :max="30" />
    <gi-flex :gap="gapValue">
      <el-button type="primary">Primary</el-button>
      <el-button type="primary">Primary</el-button>
      <el-button type="primary">Primary</el-button>
      <el-button type="primary">Primary</el-button>
      <el-button type="primary">Primary</el-button>
    </gi-flex>
  </gi-card>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'

const gapType = ref<'small' | 'middle' | 'large' | 'customize'>('large')
const customGap = ref(10)

const gapValue = computed(() => {
  if (gapType.value === 'customize') {
    return customGap.value
  }
  return gapType.value
})
</script>

自动换行 ​

设置 wrap 为 true 后，子元素在空间不足时会自动换行。

查看代码
vue
<template>
  <gi-card bordered :header-style="{ display: 'none' }">
    <gi-flex wrap :gap="8">
      <el-button v-for="i in 24" :key="i" type="primary">Button</el-button>
    </gi-flex>
  </gi-card>
</template>

API ​

Flex Props ​

属性说明类型默认值
verticalFlex 主轴的方向是否垂直，使用 flex-direction: columnbooleanfalse
wrap设置元素单行显示还是多行显示boolean | nowrap | wrap | wrap-reverse（true 为 wrap，false 为 nowrap）false
justify设置元素在主轴方向上的对齐方式normal | flex-start | flex-end | center | space-between | space-around | space-evenlynormal
align设置元素在交叉轴方向上的对齐方式normal | flex-start | flex-end | center | stretch | baselinenormal
flexflex CSS 简写属性参考 flex CSS 属性normal
gap设置网格之间的间隙预设 small(8px)、middle(16px)、large(24px)，或 string | number-