Flex

The flex is a layout component to align elements on the screen.

import { Flex } from '@backyard-ui/core';

Use the alignItems prop to align items vertically.

Use the direction prop to change items direction.

Use the justify prop to align items horizontally.

Use the wrap prop to set whether flex items are forced onto one line or can wrap onto multiple lines..

• asChild
  Description Change the component to the HTML tag or custom component of the only child

  Type

  boolean
• align
  Description The CSS `align-items` property

  Type

  ResponsiveValue<"center" | "baseline" | "flex-start" | "flex-end" | "stretch">
• direction
  Description The CSS `flex-direction` property

  Type

  ResponsiveValue<"row" | "row-reverse" | "column" | "column-reverse">

  Default

  row
• wrap
  Description The CSS `flex-wrap` property

  Type

  "wrap" | "wrap-reverse" | "nowrap"
• justify
  Description The CSS `justify-content` property

  Type

  ResponsiveValue<"center" | "baseline" | "normal" | "flex-start" | "flex-end" | "stretch" | "space-between" | "space-around" | "space-evenly">
• flex
  Description The CSS `flex` property

  Type

  Flex<string | number>
• basis
  Description The CSS `flex-basis` property

  Type

  FlexBasis<string | number>
• grow
  Description The CSS `flex-grow` property

  Type

  FlexGrow
• shrink
  Description The CSS `flex-shrink` property

  Type

  FlexShrink