Leave Yamada UI a star

Star
Yamada UIYamada UIv1.7.8

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">
  <For each={["primary", "secondary", "warning", "danger"]}>
    {(bg, index) => (
      <Box key={index} p="md" rounded="4" bg={bg} color="white">
        Box
      </Box>
    )}
  </For>
</Flex>
Copied!

Using Spacer

Editable example

<Flex w="full" gap="md">
  <For each={["primary", "secondary"]}>
    {(bg, index) => (
      <Box key={index} p="md" rounded="4" bg={bg} color="white">
        Box
      </Box>
    )}
  </For>

  <Spacer />

  <For each={["warning", "danger"]}>
    {({ p, rounded, bg, color }, index) => (
      <Box key={index} p="md" rounded="4" bg={bg} color="white">
        Box
      </Box>
    )}
  </For>
</Flex>
Copied!

Edit this page on GitHub

PreviousContainerNextWrap