FlexItem

Grow

By default, FlexItems will not expand to fill their container (grow={0}). Setting the grow prop to a positive number allows you to determine the rate at which they will expand, relative to their siblings.

For the simplest case where each item expands at the same rate, set grow={1} on all FlexItems, as in the first row below. If different values are set, then they grow proportionally. For example, the total of values for the items in the third row below is 6. So the first item will fill 3/6 or 50% of the available space, the second item will fill 2/6 or ~33%, and the last item will fill 1/6 or ~17%.

1
1
1
1
0
0
3
2
1
<DemoLayout>
  <Flex>
    <FlexItem grow={1}>1</FlexItem>
    <FlexItem grow={1}>1</FlexItem>
    <FlexItem grow={1}>1</FlexItem>
  </Flex>
  <Flex>
    <FlexItem grow={1}>1</FlexItem>
    <FlexItem grow={0}>0</FlexItem>
    <FlexItem grow={0}>0</FlexItem>
  </Flex>
  <Flex>
    <FlexItem grow={3}>3</FlexItem>
    <FlexItem grow={2}>2</FlexItem>
    <FlexItem grow={1}>1</FlexItem>
  </Flex>
</DemoLayout>