The Flex layout primitive is a thin abstraction over the CSS flexbox layout .
Alternatives Stack — For vertical layouts
Inline — For horizontal layouts, with fluid child widths that may wrap
Columns — For horizontal layouts, with prescriptive and exact child widths
Usage Gap The spacing between children can be adjusted using the gap prop.
< Flex gap = " small " >
< Box background = " dim " height = { 32 } width = { 32 } />
< Box background = " dim " height = { 32 } width = { 32 } />
< Box background = " dim " height = { 32 } width = { 32 } />
</ Flex >
Align items The align prop maps to the align-items CSS property, and defines the
alignment of items along the cross-axis of the flex container.
< Flex alignItems = " flex-end " >
< Box background = " muted " height = { 50 } width = { 32 } />
< Box background = " dim " height = { 150 } width = { 32 } />
< Box background = " muted " height = { 100 } width = { 32 } />
</ Flex >
Justify content The justify prop maps to the justify-content CSS property, and defines the
distribution of space between items along the main-axis of the flex container.
< Flex justifyContent = " space-between " >
< Box background = " muted " height = { 32 } width = { 32 } />
< Box background = " dim " height = { 32 } width = { 32 } />
< Box background = " muted " height = { 32 } width = { 32 } />
</ Flex >
Direction Sets how flex items are placed in the flex container defining the main axis and
the direction (normal or reversed).
< Flex direction = " column " >
< Box background = " muted " height = { 32 } width = { 32 } />
< Box background = " dim " height = { 32 } width = { 32 } />
< Box background = " muted " height = { 32 } width = { 32 } />
</ Flex >
Inline Display as an inline-level flex container.
Wrap Allow flex items to flow onto multiple lines.
Box Props The Flex primitive implements Box so all props are inherited.
< Flex
marginTop = " xlarge "
paddingX = " medium "
paddingY = " small "
borderRadius = " small "
background = " muted "
>
< Text > Props from the Box component are supported </ Text >
</ Flex >
