Flex 弹性布局组件 #

import { Flex } from '@chakra-ui/react'

function Example() {
  return (
    <Flex justify="center" align="center" h="100vh">
      <Box>居中内容</Box>
    </Flex>
  )
}

<Flex>
  <Box>项目 1</Box>
  <Box>项目 2</Box>
  <Box>项目 3</Box>
</Flex>

<Flex gap={4}>
  <Box>项目 1</Box>
  <Box>项目 2</Box>
  <Box>项目 3</Box>
</Flex>

<Flex flexDirection="row">
  <Box>水平排列（默认）</Box>
</Flex>

<Flex flexDirection="row-reverse">
  <Box>反向水平排列</Box>
</Flex>

<Flex flexDirection="column">
  <Box>垂直排列</Box>
</Flex>

<Flex flexDirection="column-reverse">
  <Box>反向垂直排列</Box>
</Flex>

<Flex justify="flex-start">起点对齐</Flex>
<Flex justify="flex-end">终点对齐</Flex>
<Flex justify="center">居中对齐</Flex>
<Flex justify="space-between">两端对齐</Flex>
<Flex justify="space-around">环绕对齐</Flex>
<Flex justify="space-evenly">均匀对齐</Flex>

<Flex align="flex-start">起点对齐</Flex>
<Flex align="flex-end">终点对齐</Flex>
<Flex align="center">居中对齐</Flex>
<Flex align="stretch">拉伸对齐</Flex>
<Flex align="baseline">基线对齐</Flex>

<Flex wrap="nowrap">不换行（默认）</Flex>
<Flex wrap="wrap">换行</Flex>
<Flex wrap="wrap-reverse">反向换行</Flex>

<Flex gap={2}>间距 8px</Flex>
<Flex gap={4}>间距 16px</Flex>
<Flex gap={6}>间距 24px</Flex>
<Flex gap="20px">自定义间距</Flex>

<Flex justify="center" align="center" h="200px" bg="gray.100">
  <Box p={4} bg="blue.500" color="white">
    水平垂直居中
  </Box>
</Flex>

<Flex justify="space-between" align="center" p={4} bg="white" shadow="sm">
  <Box fontWeight="bold" fontSize="xl">
    Logo
  </Box>
  <Flex gap={4}>
    <Link href="#">首页</Link>
    <Link href="#">功能</Link>
    <Link href="#">价格</Link>
  </Flex>
  <Button colorScheme="blue">登录</Button>
</Flex>

<Flex wrap="wrap" gap={6}>
  {items.map((item) => (
    <Box key={item.id} p={4} bg="white" shadow="md" borderRadius="lg" flex="1 1 300px">
      {item.title}
    </Box>
  ))}
</Flex>

<Flex h="100vh">
  <Box w="250px" bg="gray.800" color="white" p={4}>
    侧边栏
  </Box>
  <Box flex="1" bg="gray.100" p={4}>
    主内容区
  </Box>
</Flex>

<Flex justify="space-between" align="center" p={4} bg="gray.100">
  <Box color="gray.600">© 2024 Company</Box>
  <Flex gap={4}>
    <Link href="#">隐私政策</Link>
    <Link href="#">服务条款</Link>
    <Link href="#">联系我们</Link>
  </Flex>
</Flex>

<Flex>
  <Box flex="1">flex: 1</Box>
  <Box flex="2">flex: 2</Box>
  <Box flex="1">flex: 1</Box>
</Flex>

<Flex>
  <Box flexGrow={0}>不增长</Box>
  <Box flexGrow={1}>自动增长</Box>
</Flex>

<Flex>
  <Box flexShrink={0}>不收缩</Box>
  <Box flexShrink={1}>可收缩</Box>
</Flex>

<Flex>
  <Box flexBasis="200px">基础宽度 200px</Box>
  <Box flexBasis="auto">自动</Box>
</Flex>

<Flex h="200px" align="center">
  <Box alignSelf="flex-start">顶部对齐</Box>
  <Box>居中</Box>
  <Box alignSelf="flex-end">底部对齐</Box>
</Flex>

<Flex>
  <Box order={3}>第一（order: 3）</Box>
  <Box order={1}>第二（order: 1）</Box>
  <Box order={2}>第三（order: 2）</Box>
</Flex>

<Flex
  direction={{
    base: 'column',
    md: 'row'
  }}
  gap={4}
>
  <Box>项目 1</Box>
  <Box>项目 2</Box>
  <Box>项目 3</Box>
</Flex>

<Flex
  justify={{
    base: 'center',
    md: 'space-between'
  }}
>
  <Box>项目 1</Box>
  <Box>项目 2</Box>
</Flex>

<Flex
  gap={{
    base: 2,
    md: 4,
    lg: 6
  }}
>
  <Box>项目 1</Box>
  <Box>项目 2</Box>
</Flex>

function FormRow({ label, children }) {
  return (
    <Flex align="center" gap={4} mb={4}>
      <Box w="120px" fontWeight="medium">
        {label}
      </Box>
      <Box flex="1">
        {children}
      </Box>
    </Flex>
  )
}

function TagGroup({ tags }) {
  return (
    <Flex wrap="wrap" gap={2}>
      {tags.map((tag) => (
        <Tag key={tag}>{tag}</Tag>
      ))}
    </Flex>
  )
}

function AvatarGroup({ users, max = 4 }) {
  const visible = users.slice(0, max)
  const remaining = users.length - max
  
  return (
    <Flex>
      {visible.map((user, index) => (
        <Box
          key={user.id}
          ml={index > 0 ? '-8px' : 0}
          borderRadius="full"
          border="2px solid white"
        >
          <Avatar src={user.avatar} size="sm" />
        </Box>
      ))}
      {remaining > 0 && (
        <Box
          ml="-8px"
          borderRadius="full"
          border="2px solid white"
          bg="gray.200"
          w="32px"
          h="32px"
          display="flex"
          alignItems="center"
          justifyContent="center"
          fontSize="xs"
          fontWeight="bold"
        >
          +{remaining}
        </Box>
      )}
    </Flex>
  )
}

function Pagination({ current, total, onChange }) {
  return (
    <Flex justify="center" align="center" gap={2}>
      <Button
        size="sm"
        isDisabled={current === 1}
        onClick={() => onChange(current - 1)}
      >
        上一页
      </Button>
      {Array.from({ length: total }, (_, i) => i + 1).map((page) => (
        <Button
          key={page}
          size="sm"
          colorScheme={current === page ? 'blue' : 'gray'}
          onClick={() => onChange(page)}
        >
          {page}
        </Button>
      ))}
      <Button
        size="sm"
        isDisabled={current === total}
        onClick={() => onChange(current + 1)}
      >
        下一页
      </Button>
    </Flex>
  )
}

function Breadcrumb({ items }) {
  return (
    <Flex align="center" gap={2}>
      {items.map((item, index) => (
        <Flex key={index} align="center">
          {index > 0 && <ChevronRightIcon mx={2} color="gray.400" />}
          <Link
            href={item.href}
            color={index === items.length - 1 ? 'gray.800' : 'blue.500'}
            fontWeight={index === items.length - 1 ? 'medium' : 'normal'}
          >
            {item.label}
          </Link>
        </Flex>
      ))}
    </Flex>
  )
}