Flex
Flex is a low-level layout component that provides a common, ergonomic API for building one-dimensional layouts with CSS Flexbox.
Usage Guidance
Coming soon!
Examples
Basic Example
Flex vs. Box
Flex
is built with Box
and has access to all BoxProps
. The main differences between Box
and
Flex
are:
Flex
is set todisplay: flex
by default- The
display
prop is limited toflex
andinline-flex
Flex
has access to flex container style props.
In short, use Flex
when you need a flex container to build one-directional layouts with CSS
Flexbox, and use Box
when you need a simple container. It's also important to note that Flex
has
no real opinion about how to build layouts outside of the CSS Flexbox spec. This allows it to be
composed into many different components.
Component API
Flex
Flex
is the container component for creating one-dimensional layouts with CSS Flexbox. It has
special style props that map to CSS Flexbox style properties to provide a common, ergonomic API for
building layouts.
<Flex flexDirection="column" rowGap="xs"><div>Implicit flex item 1</div><div>Implicit flex item 2</div><div>Implicit flex item 3</div></Flex>
Props
Flex
exposes flex container style props and Box
style props.
Flex.Item
Flex.Item
is a subcomponent of Flex
. It is a Box
component under the hood and exposes
flex item style props that map to CSS Flexbox Item
properties. This provides greater control over how child components render in your layout.
<Flex flexDirection="column" rowGap="xs"><Flex.Item flex={1}>First Item</Flex.Item><Flex.Item flex={2}>Second Item</Flex.Item><Flex.Item flex={1}>Third Item</Flex.Item></Flex>
Props
Flex.Item
exposes flex item style props and Box
style props.
Can't Find What You Need?
Check out our FAQ section which may help you find the information you're looking for.
FAQ Section