弹性

用于管理弹性布局

import { Flex } from "@chakra-ui/react"
import { DecorativeBox } from "compositions/lib/decorative-box"

const Demo = () => {
  return (
    <Flex gap="4">
      <DecorativeBox height="10" />
      <DecorativeBox height="10" />
      <DecorativeBox height="10" />
    </Flex>
  )
}

用法

¥Usage

import { Flex, Spacer } from "@chakra-ui/react"

<Flex>
  <div />
  <div />
</Flex>

示例

¥Examples

方向

¥Direction

使用 direction 或 flexDirection prop 更改 flex 的方向

¥Use the direction or flexDirection prop to change the direction of the flex

import { Flex } from "@chakra-ui/react"
import { DecorativeBox } from "compositions/lib/decorative-box"

const Demo = () => {
  return (
    <Flex gap="4" direction="column">
      <DecorativeBox height="10" />
      <DecorativeBox height="10" />
      <DecorativeBox height="10" />
    </Flex>
  )
}

对齐

¥Align

使用 align 或 alignItems prop 使子元素沿横轴对齐。

¥Use the align or alignItems prop to align the children along the cross axis.

import { Flex } from "@chakra-ui/react"
import { DecorativeBox } from "compositions/lib/decorative-box"

const Demo = () => {
  return (
    <Flex gap="4" align="center">
      <DecorativeBox height="4" />
      <DecorativeBox height="8" />
      <DecorativeBox height="10" />
    </Flex>
  )
}

对齐

¥Justify

使用 justify 或 justifyContent prop 使子元素沿主轴对齐。

¥Use the justify or justifyContent prop to align the children along the main axis.

flex-start

center

flex-end

space-between

import { Flex } from "@chakra-ui/react"
import { DecorativeBox } from "compositions/lib/decorative-box"

const Demo = () => {
  return (
    <Flex direction="column" gap="8">
      <Flex gap="4" justify="flex-start">
        <DecorativeBox height="10" width="120px" />
        <DecorativeBox height="10" width="120px">
          flex-start
        </DecorativeBox>
        <DecorativeBox height="10" width="120px" />
      </Flex>

      <Flex gap="4" justify="center">
        <DecorativeBox height="10" width="120px" />
        <DecorativeBox height="10" width="120px">
          center
        </DecorativeBox>
        <DecorativeBox height="10" width="120px" />
      </Flex>

      <Flex gap="4" justify="flex-end">
        <DecorativeBox height="10" width="120px" />
        <DecorativeBox height="10" width="120px">
          flex-end
        </DecorativeBox>
        <DecorativeBox height="10" width="120px" />
      </Flex>

      <Flex gap="4" justify="space-between">
        <DecorativeBox height="10" width="120px" />
        <DecorativeBox height="10" width="120px">
          space-between
        </DecorativeBox>
        <DecorativeBox height="10" width="120px" />
      </Flex>
    </Flex>
  )
}

顺序

¥Order

使用 order 属性更改子项的顺序。

¥Use the order prop to change the order of the children.

import { Flex } from "@chakra-ui/react"
import { DecorativeBox } from "compositions/lib/decorative-box"

const Demo = () => {
  return (
    <Flex gap="4">
      <DecorativeBox height="10" order="1">
        1
      </DecorativeBox>
      <DecorativeBox height="10" order="3">
        2
      </DecorativeBox>
      <DecorativeBox height="10" order="2">
        3
      </DecorativeBox>
    </Flex>
  )
}

自动边距

¥Auto Margin

对弹性项目应用外边距，使其远离其兄弟元素。

¥Apply margin to a flex item to push it away from its siblings.

import { Flex } from "@chakra-ui/react"
import { DecorativeBox } from "compositions/lib/decorative-box"

const Demo = () => {
  return (
    <Flex gap="4" justify="space-between">
      <DecorativeBox height="10" width="40" />
      <DecorativeBox height="10" width="40" marginEnd="auto" />
      <DecorativeBox height="10" width="40" />
    </Flex>
  )
}

间隔

¥Spacer

使用 Spacer 组件在弹性项目之间创建弹性空间。它会扩展以填充所有可用空间，并将项目推到两端。

¥Use the Spacer component to create flexible space between flex items. It will expand to fill all available space, pushing items to opposite ends.

Box 1

Box 2

import { Box, Flex, Spacer } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Flex>
      <Box p="4" bg="red.400" color="white">
        Box 1
      </Box>
      <Spacer />
      <Box p="4" bg="green.400" color="white">
        Box 2
      </Box>
    </Flex>
  )
}

换行

¥Wrap

使用 wrap 或 flexWrap 属性在子元素溢出父元素时封装子元素。

¥Use the wrap or flexWrap prop to wrap the children when they overflow the parent.

import { Flex } from "@chakra-ui/react"
import { DecorativeBox } from "compositions/lib/decorative-box"

const Demo = () => {
  return (
    <Flex gap="4" wrap="wrap" maxW="500px">
      <DecorativeBox height="10" width="200px" />
      <DecorativeBox height="10" width="200px" />
      <DecorativeBox height="10" width="200px" />
    </Flex>
  )
}

属性

¥Props

Prop	Default	Type
`align`		`SystemStyleObject['alignItems'] \| undefined`
`justify`		`SystemStyleObject['justifyContent'] \| undefined`
`wrap`		`SystemStyleObject['flexWrap'] \| undefined`
`direction`		`SystemStyleObject['flexDirection'] \| undefined`
`basis`		`SystemStyleObject['flexBasis'] \| undefined`
`grow`		`SystemStyleObject['flexGrow'] \| undefined`
`shrink`		`SystemStyleObject['flexShrink'] \| undefined`
`inline`		`boolean \| undefined`
`as`		`React.ElementType` The underlying element to render.
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

容器

浮动

弹性

.css-vfo6uh{color:var(--chakra-colors-fg);-webkit-text-decoration:underline;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:var(--chakra-colors-border-emphasized);font-weight:500;}用法

用法