Leave Yamada UI a star

Star
Yamada UIYamada UIv1.5.1

Flex

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

Source@yamada-ui/layouts

Props

FlexProps

align

Description

The CSS align-items property.

Type

(string & {}) | "center" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "stretch" | "end" | "flex-end" | "flex-start" | "start" | "normal" | "self-end" | ... 6 more ... | ((theme: StyledTheme) => UIValue<...>)

basis

Description

The CSS flex-basis property.

Type

number | (string & {}) | "content" | "px" | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | "max-content" | ... 73 more ... | ((theme: StyledTheme) => UIValue<...>)

direction

Description

The CSS flex-direction property.

Type

"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "column" | "column-reverse" | "row" | "row-reverse" | Partial<Record<Breakpoint, FlexDirection | [...]>> | [...] | Partial<...> | [...] | ((theme: StyledTheme) => UIValue<...>)

grow

Description

The CSS flex-grow property.

Type

(string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | (number & {}) | Partial<Record<Breakpoint, FlexGrow | [FlexGrow, FlexGrow]>> | [...] | Partial<...> | [...] | ((theme: StyledTheme) => UIValue<...>)

justify

Description

The CSS justify-content property.

Type

(string & {}) | "left" | "right" | "center" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "space-around" | "space-between" | "space-evenly" | ... 10 more ... | ((theme: StyledTheme) => UIValue<...>)

shrink

Description

The CSS flex-shrink property.

Type

(string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | (number & {}) | Partial<Record<Breakpoint, FlexShrink | [FlexShrink, FlexShrink]>> | [...] | Partial<...> | [...] | ((theme: StyledTheme) => UIValue<...>)

wrap

Description

The CSS flex-wrap property.

Type

"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap" | "wrap-reverse" | Partial<Record<Breakpoint, FlexWrap | [FlexWrap, FlexWrap]>> | [...] | Partial<...> | [...] | ((theme: StyledTheme) => UIValue<...>)

Edit this page on GitHub

PreviousContainerNextWrap