Flex is Box with
display: flex and comes with helpful
style shorthand. It renders a
Using the Flex components, here are some helpful shorthand props:
While you can pass the verbose props, using the shorthand can save you some time.
As an alternative to
Stack, you can combine
Spacer to create
stackable and responsive layouts.
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 them will not be equal.
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.
|align||Shorthand for `alignItems` style prop||-|
|basis||Shorthand for `flexBasis` style prop||-|
|css||The emotion's css style object||-|
|direction||Shorthand for `flexDirection` style prop||-|
|grow||Shorthand for `flexGrow` style prop||-|
|justify||Shorthand for `justifyContent` style prop||-|
|shrink||Shorthand for `flexShrink` style prop||-|
|wrap||Shorthand for `flexWrap` style prop||-|