Leave Yamada UI a star

Star
Yamada UIYamada UIv1.6.4

Flex

Flex is a component that sets flex to Box. Also, convenient style shorthand is available.

Source@yamada-ui/layouts

Import

import { Flex } from "@yamada-ui/react"
Copied!

Usage

The shorthand provided in Flex is as follows:

  • direction: This is a shorthand props for flexDirection.
  • wrap: This is a shorthand props for flexWrap.
  • basis: This is a shorthand props for flexBasis.
  • grow: This is a shorthand props for flexGrow.
  • shrink: This is a shorthand props for flexShrink.
  • align: This is a shorthand props for alignItems.
  • justify: This is a shorthand props for justifyContent.

Editable example

<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>
Copied!

Using Spacer

Editable example

<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>
Copied!

Edit this page on GitHub

PreviousContainerNextWrap