开发预览更新于 2026-05-10

Flex 弹性布局

用组件化 API 管理 flex-direction、align、justify、gap 与 wrap，减少页面内联样式。

基础用法

CfFlex 适合按钮组、表单行、状态栏、卡片工具区等高频弹性布局。gap 支持 token 尺寸，也支持数字像素或任意 CSS 长度。

背景

ProductionHealthy3 alerts

CPU 42%

Memory 68%

Queue 12

<script setup lang="ts">
import { CfBadge, CfButton, CfFlex, CfTag } from '@chufix-design/vue';
</script>

<template>
  <CfFlex direction="column" gap="lg" style="width: 100%; max-width: 720px;">
    <CfFlex align="center" justify="between" wrap gap="md">
      <CfFlex align="center" wrap gap="sm">
        <CfTag tone="info">Production</CfTag>
        <CfTag tone="success">Healthy</CfTag>
        <CfBadge tone="warning">3 alerts</CfBadge>
      </CfFlex>
      <CfFlex align="center" gap="sm">
        <CfButton variant="ghost">忽略</CfButton>
        <CfButton variant="primary">处理</CfButton>
      </CfFlex>
    </CfFlex>

    <CfFlex wrap gap="md">
      <div class="demo-tile">CPU 42%</div>
      <div class="demo-tile">Memory 68%</div>
      <div class="demo-tile">Queue 12</div>
    </CfFlex>
  </CfFlex>
</template>

<style scoped>
.demo-tile {
  min-width: 150px;
  flex: 1 1 0;
  border: 1px solid var(--line-1);
  border-radius: 8px;
  padding: 16px;
  background: var(--surface-1);
  color: var(--fg-1);
}
</style>

<CfFlex align="center" justify="between" wrap gap="md">...</CfFlex>

API

属性	类型	默认值	说明
`as`	`string / ElementType`	`div`	渲染元素
`direction`	`row / column / row-reverse / column-reverse`	`row`	主轴方向
`align`	`start / center / end / stretch / baseline`	`stretch`	交叉轴对齐
`justify`	`start / center / end / between / around / evenly`	`start`	主轴分布
`gap`	`none / xs / sm / md / lg / xl / number / string`	`md`	间距
`wrap`	`boolean`	`false`	是否换行
`inline`	`boolean`	`false`	使用 `inline-flex`
`full`	`boolean`	`false`	宽度占满父级