介绍

适合设置各种水平、垂直对齐方式，设置组件之间的间距。

代码演示

基础使用

最基础的用法，通过间距组件来给组件之间提供统一的间距。

<template>
  <s-flex gap="medium">
    <s-button>按钮</s-button>
    <s-button>按钮</s-button>
    <s-button>按钮</s-button>
  </s-flex>
</template>

垂直布局

使用 direction 来控制布局的方式, 背后实际上是利用了 flex-direction 来控制。

<template>
  <s-flex vertical gap="medium">
    <s-button>按钮</s-button>
    <s-button>按钮</s-button>
    <s-button>按钮</s-button>
  </s-flex>
</template>

间距大小

通过调整 gap 的值来控制间距的大小。

使用内置的 small、medium、large 来设置间距大小。

vue ts

<template>
  <s-flex vertical gap="large">
    <s-radio-group v-model="gap" direction="horizontal" :options="flexGap" />

    <s-flex :gap="gap">
      <s-button>按钮</s-button>
      <s-button>按钮</s-button>
      <s-button>按钮</s-button>
    </s-flex>
  </s-flex>
</template>

<script setup lang="ts">
import { flexGap, type FlexGap } from 'sard'
import { ref } from 'vue'

const gap = ref<FlexGap>('medium')
</script>

vue js

<template>
  <s-flex vertical gap="large">
    <s-radio-group v-model="gap" direction="horizontal" :options="flexGap" />

    <s-flex :gap="gap">
      <s-button>按钮</s-button>
      <s-button>按钮</s-button>
      <s-button>按钮</s-button>
    </s-flex>
  </s-flex>
</template>

<script setup lang="js">
import { flexGap } from 'sard'
import { ref } from 'vue'
const gap = ref('medium')
</script>

自定义间距大小

很多时候，内建的大小不满足设计师的要求，我们可以通过传入自己定义的大小来设置。

vue ts

<template>
  <s-flex vertical gap="large">
    <s-slider v-model="gap" :min="0" :max="80" show-value />

    <s-flex :gap="gap + 'px'">
      <s-button>按钮</s-button>
      <s-button>按钮</s-button>
      <s-button>按钮</s-button>
    </s-flex>
  </s-flex>
</template>

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

const gap = ref(10)
</script>

vue js

<template>
  <s-flex vertical gap="large">
    <s-slider v-model="gap" :min="0" :max="80" show-value />

    <s-flex :gap="gap + 'px'">
      <s-button>按钮</s-button>
      <s-button>按钮</s-button>
      <s-button>按钮</s-button>
    </s-flex>
  </s-flex>
</template>

<script setup lang="js">
import { ref } from 'vue'
const gap = ref(10)
</script>

自动换行

在 horizontal 模式下，通过使用 wrap 来控制自动换行行为。

<template>
  <s-flex wrap gap="medium">
    <s-button>按钮</s-button>
    <s-button>按钮</s-button>
    <s-button>按钮</s-button>
    <s-button>按钮</s-button>
    <s-button>按钮</s-button>
    <s-button>按钮</s-button>
    <s-button>按钮</s-button>
  </s-flex>
</template>

对齐

设置该值可以调整所有子节点在容器内的对齐方式，可设置的值与 align-items 一致。

vue ts

<template>
  <s-segmented v-model="value" :options="alignments" />
  <div class="wrapper">
    <s-flex :align="value" gap="medium">
      <div class="box"></div>
      <s-button>{{ value }}</s-button>
    </s-flex>
  </div>
</template>

<script setup lang="ts">
import type { FlexAlign } from 'sard/components/flex/common'
import { ref } from 'vue'

const alignments = ['start', 'center', 'end', 'baseline']

const value = ref<FlexAlign>('start')
</script>

<style lang="scss" scoped>
.wrapper {
  margin-top: 10px;
  padding: 10px;
  background: var(--s-fill-color-fourth);
}
.box {
  width: 100px;
  height: 100px;
  background: var(--s-fill-color);
}
</style>

vue js

<template>
  <s-segmented v-model="value" :options="alignments" />
  <div class="wrapper">
    <s-flex :align="value" gap="medium">
      <div class="box"></div>
      <s-button>{{ value }}</s-button>
    </s-flex>
  </div>
</template>

<script setup lang="js">
import { ref } from 'vue'
const alignments = ['start', 'center', 'end', 'baseline']
const value = ref('start')
</script>

<style lang="scss" scoped>
.wrapper {
  margin-top: 10px;
  padding: 10px;
  background: var(--s-fill-color-fourth);
}
.box {
  width: 100px;
  height: 100px;
  background: var(--s-fill-color);
}
</style>

API

FlexProps

属性	描述	类型	默认值
direction	排列的方向	FlexDirection	-
gap	间隔大小	FlexGap | (string & {})	-
align	垂直排布方式	FlexAlign	-
justify	水平排布方式	FlexJustify	-
flex	flex CSS 简写属性	string	-
wrap	设置是否自动折行	boolean	false

type FlexGap = 'small' | 'medium' | 'large'
type FlexAlign = 'start' | 'end' | 'center' | 'baseline'
type FlexJustify = 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly'
type FlexDirection = 'column' | 'row' | 'column-reverse' | 'row-reverse'

FlexSlots

插槽	描述	属性
default	自定义默认内容	-

主题定制

样式变量

CSS 变量	值
--s-flex-gap-sm	var(--s-size-xs)
--s-flex-gap	var(--s-size-sm)
--s-flex-gap-lg	var(--s-size)