WUI logo

Flex

The Flex component is a layout element that arranges its child components in a flexible and responsive manner using CSS Flexbox. It simplifies the creation of complex, adaptive layouts by controlling the alignment, distribution, and spacing of items within a container. This component is fundamental for building responsive and cohesive designs that adapt seamlessly to different screen sizes and orientations.

Source@welcome-ui/flex
OverviewProps

Flex

align

"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "center" | "end" | "flex-end" | "flex-start" | "self-end" | "self-start" | "start" | "baseline" | "normal" | "stretch" | string & {} | ThemeProp<AlignItems, Theme>

same as alignItems

basis

string | number | string & {} | ThemeProp<string | number | (string & {}), Theme>

same as flexBasis

direction

"row" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "column" | "column-reverse" | "row-reverse" | ThemeProp<FlexDirection, Theme>

same as flexDirection

grow

"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | string & {} | number & {} | ThemeProp<FlexGrow, Theme>

same as flexGrow

justify

"right" | "left" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "center" | "end" | "flex-end" | "flex-start" | "start" | "normal" | "stretch" | string & {} | "space-around" | "space-between" | "space-evenly" | ThemeProp<JustifyContent, Theme>

same as justifyContent

shrink

"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | string & {} | number & {} | ThemeProp<FlexShrink, Theme>

same as flexShrink

wrap

"wrap" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse" | ThemeProp<FlexWrap, Theme>

same as flexWrap

BoxGrid