#Flex
By default it renders a <div>
element with display: flex
.
You may want to try use a horizontal Stack or Set before using Flex.
#Import
import { Flex } from 'bumbag';
#Usage
#Alignments
You can apply alignments to your Flex
using the alignX
and alignY
props.
#Horizontal align
#Vertical align
#Props
#Flex Props
Inherits Box
props
use
string | (ComponentClass<any, any> & { useProps: any; }) | (FunctionComponent<any> & { useProps: any; })
className
string
children
string | number | boolean | {} | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<...>)> | ReactNodeArray | ReactPortal | ((props: BoxProps) => ReactNode)
alignX
"left" | "right" | "center"
alignY
"bottom" | "top" | "center"
altitude
string
variant
string
colorMode
string
disabled
boolean
overrides
{ useCSSVariables?: boolean; altitudes?: AltitudesThemeConfig; borders?: BordersThemeConfig; borderRadii?: BorderRadiiThemeConfig; ... 94 more ...; Template?: TemplateThemeConfig; }
elementRef
((instance: any) => void) | RefObject<any>
themeKey
string
#Theming
Flex.styles.base
This is a flex box