Flex is Box with display: flex
and comes with helpful
style shorthand. It renders a div
element.
Box
with display: flex
Flex
Using the Flex components, here are some helpful shorthand props:
flexDirection
is direction
flexWrap
is wrap
alignItems
is align
justifyContent
is justify
While you can pass the verbose props, using the shorthand can save you some time.
Box 1
Box 2
Box 3
As an alternative to Stack
, you can combine Flex
and Spacer
to create
stackable and responsive layouts.
The Flex
and Spacer
components, Grid
and HStack
treat children of
different widths differently.
HStack
, the children will have equal spacing between them but they won't
span the entire width of the container.Grid
, the starting points of the children will be equally spaced but the
gaps between the children will be different.Flex
and Spacer
, the children will span the entire width of the
container and also have equal spacing between them.Flex and Spacer: Full width, equal Spacing
Grid: The children start at the beginning, the 1/3 mark and 2/3 mark
HStack: The children have equal spacing but don't span the whole container
A good use case for Spacer
is to create a navbar with a signup/login button
aligned to the right