Flex

用于构建响应式布局的弹性盒布局组件。

导入

import { Flex } from 'asterui'

示例

基础

默认的水平弹性布局。

import { Flex, Button } from 'asterui'

function App() {
  return (
      <Flex gap="sm">
        <Button color="primary">Button 1</Button>
        <Button color="secondary">Button 2</Button>
        <Button color="accent">Button 3</Button>
      </Flex>
    )
}

export default App

方向

使用 direction 属性控制弹性方向。

import { Flex, Button } from 'asterui'

function App() {
  return (
      <Flex direction="column" gap="sm">
        <Button color="primary">First</Button>
        <Button color="secondary">Second</Button>
        <Button color="accent">Third</Button>
      </Flex>
    )
}

export default App

主轴对齐

沿主轴分布项目。

import { Flex, Button } from 'asterui'

function App() {
  return (
      <Flex direction="column" gap="md">
        <Flex justify="start" gap="sm" className="bg-base-200 p-2 rounded">
          <Button size="sm">Start</Button>
          <Button size="sm">Items</Button>
        </Flex>
        <Flex justify="center" gap="sm" className="bg-base-200 p-2 rounded">
          <Button size="sm">Center</Button>
          <Button size="sm">Items</Button>
        </Flex>
        <Flex justify="end" gap="sm" className="bg-base-200 p-2 rounded">
          <Button size="sm">End</Button>
          <Button size="sm">Items</Button>
        </Flex>
        <Flex justify="between" className="bg-base-200 p-2 rounded">
          <Button size="sm">Between</Button>
          <Button size="sm">Items</Button>
        </Flex>
      </Flex>
    )
}

export default App

交叉轴对齐

沿交叉轴对齐项目。

import { Flex, Button } from 'asterui'

function App() {
  return (
      <Flex gap="md">
        <Flex align="start" gap="sm" className="bg-base-200 p-2 rounded h-24">
          <Button size="xs">Top</Button>
          <Button size="sm">Aligned</Button>
        </Flex>
        <Flex align="center" gap="sm" className="bg-base-200 p-2 rounded h-24">
          <Button size="xs">Center</Button>
          <Button size="sm">Aligned</Button>
        </Flex>
        <Flex align="end" gap="sm" className="bg-base-200 p-2 rounded h-24">
          <Button size="xs">Bottom</Button>
          <Button size="sm">Aligned</Button>
        </Flex>
      </Flex>
    )
}

export default App

间距尺寸

控制项目之间的间距。

Gap

import { Flex, Badge } from 'asterui'

function App() {
  return (
      <Flex direction="column" gap="lg">
        <Flex gap="xs">
          <Badge>XS</Badge>
          <Badge>Gap</Badge>
        </Flex>
        <Flex gap="sm">
          <Badge>SM</Badge>
          <Badge>Gap</Badge>
        </Flex>
        <Flex gap="md">
          <Badge>MD</Badge>
          <Badge>Gap</Badge>
        </Flex>
        <Flex gap="lg">
          <Badge>LG</Badge>
          <Badge>Gap</Badge>
        </Flex>
        <Flex gap="xl">
          <Badge>XL</Badge>
          <Badge>Gap</Badge>
        </Flex>
      </Flex>
    )
}

export default App

换行

允许项目换行到下一行。

Tag 1

Tag 2

Tag 3

Tag 4

Tag 5

Tag 6

Tag 7

Tag 8

import { Flex, Badge } from 'asterui'

function App() {
  return (
      <Flex wrap gap="sm">
        <Badge>Tag 1</Badge>
        <Badge>Tag 2</Badge>
        <Badge>Tag 3</Badge>
        <Badge>Tag 4</Badge>
        <Badge>Tag 5</Badge>
        <Badge>Tag 6</Badge>
        <Badge>Tag 7</Badge>
        <Badge>Tag 8</Badge>
      </Flex>
    )
}

export default App

居中内容

在水平和垂直方向上居中内容。

Centered Card

This card is centered in its container.

import { Flex, Card, Typography } from 'asterui'

function App() {
  const { Title, Paragraph } = Typography
  
  return (
      <Flex
        justify="center"
        align="center"
        className="bg-base-200 rounded-lg"
        style={{ height: '200px' }}
      >
        <Card className="w-64">
          <Title level={4}>Centered Card</Title>
          <Paragraph>This card is centered in its container.</Paragraph>
        </Card>
      </Flex>
    )
}

export default App

嵌套弹性

组合弹性容器以实现复杂布局。

Main Content

import { Flex, Button } from 'asterui'

function App() {
  return (
      <Flex direction="column" gap="md">
        <Flex justify="between" className="bg-base-200 p-4 rounded">
          <Button variant="ghost">Logo</Button>
          <Flex gap="sm">
            <Button variant="ghost">Home</Button>
            <Button variant="ghost">About</Button>
            <Button color="primary">Contact</Button>
          </Flex>
        </Flex>
        <Flex gap="md" className="p-4">
          <Flex direction="column" gap="sm" flex="1" className="bg-base-200 p-4 rounded">
            <Button variant="ghost" shape="block">Sidebar Item 1</Button>
            <Button variant="ghost" shape="block">Sidebar Item 2</Button>
          </Flex>
          <Flex flex="1" className="bg-base-200 p-4 rounded min-h-32" justify="center" align="center">
            Main Content
          </Flex>
        </Flex>
      </Flex>
    )
}

export default App

API

`Flex`

属性	描述	类型	默认值
`direction`	弹性方向	`'row' \| 'column' \| 'row-reverse' \| 'column-reverse'`	`'row'`
`justify`	沿主轴对齐内容	`'start' \| 'end' \| 'center' \| 'between' \| 'around' \| 'evenly'`	-
`align`	沿交叉轴对齐项目	`'start' \| 'end' \| 'center' \| 'baseline' \| 'stretch'`	-
`wrap`	是否换行项目	`boolean \| 'wrap' \| 'nowrap' \| 'wrap-reverse'`	`false`
`gap`	项目之间的间距	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| number`	-
`flex`	容器的弹性简写	`'1' \| 'auto' \| 'initial' \| 'none'`	-
`inline`	使用 inline-flex 代替 flex	`boolean`	`false`
`minHeight`	最小高度	`'screen' \| 'full' \| 'fit' \| 'min' \| 'max'`	-
`minWidth`	最小宽度	`'full' \| 'fit' \| 'min' \| 'max'`	-
`className`	额外的 CSS 类名	`string`	-
`data-testid`	用于测试的测试 ID	`string`	-

使用说明

Flex 是一个布局工具，没有特定的无障碍要求
保持子元素的语义结构
Gap 映射到 Tailwind 间距：xs=1, sm=2, md=4, lg=6, xl=8