Shortcut for the most common flexbox sizing knob — flex={1} is a
fill-the-parent container, flex={0} shrinks to its content. Anything
you'd write as style={{ flex: n }} works as flex={n} on the prop
surface, with the same Yoga layout semantics on RN and web.
<HStack> <Box flex={1}>{/* takes whatever's left */}</Box> <Avatar size="sm" /></HStack>
Pass style if you need cross-axis or basis options too — they merge
with the flex shortcut, with style winning on conflict.
Flex grow factor for proportional layouts inside HStack / VStack.
In an HStack with three children of `flex={1}`, each takes one third
of the available width. For a 20/60/20 split: `flex={1}`, `flex={3}`,
`flex={1}` — the values are ratios, not percentages.
Maps directly to React Native / web flexbox `flex` style.