Flex
Flexは、Boxにflexを設定したコンポーネントです。また、便利なスタイルのショートハンドが用意されています。
インポート
import { Flex } from "@yamada-ui/react"
使い方
Flexに用意されているショートハンドは下記の通りです。
direction:flexDirectionを短縮したpropsです。wrap:flexWrapを短縮したpropsです。basis:flexBasisを短縮したpropsです。grow:flexGrowを短縮したpropsです。shrink:flexShrinkを短縮したpropsです。align:alignItemsを短縮したpropsです。justify:justifyContentを短縮したpropsです。
ショートハンド以外にも、冗長なpropsを渡すこともできます。
編集可能な例
<Flex gap="md"> <Box p="md" rounded="4" bg="primary" color="white"> Box </Box> <Box p="md" rounded="4" bg="secondary" color="white"> Box </Box> <Box p="md" rounded="4" bg="warning" color="white"> Box </Box> <Box p="md" rounded="4" bg="danger" color="white"> Box </Box> </Flex>
Spacerを使う
編集可能な例
<Flex w="full" gap="md"> <Box p="md" rounded="4" bg="primary" color="white"> Box </Box> <Box p="md" rounded="4" bg="secondary" color="white"> Box </Box> <Spacer /> <Box p="md" rounded="4" bg="warning" color="white"> Box </Box> <Box p="md" rounded="4" bg="danger" color="white"> Box </Box> </Flex>
GitHubでこのページを編集する