Flex Grow

Utilities for controlling how flex items grow.

Grow

Use flexGrow={1} to allow a flex item to grow to fill any available space:

<x.div display="flex">
  <x.div flex="none">{/* This item will not grow */}</x.div>
  <x.div flexGrow={1}>{/* This item will grow */}</x.div>
  <x.div flex="none">{/* This item will not grow */}</x.div>
</x.div>

Don't grow

Use flexGrow={0} to prevent a flex item from growing:

<x.div display="flex">
  <x.div flexGrow={1}>{/* This item will grow */}</x.div>
  <x.div flexGrow={0}>{/* This item will not grow */}</x.div>
  <x.div flexGrow={1}>{/* This item will grow */}</x.div>
</x.div>

Responsive

To control how a flex item grows at a specific breakpoint, use responsive object notation. For example, adding the property flexGrow={{ md: 1 }} to an element would apply the flexGrow={1} utility at medium screen sizes and above.

<x.div flexGrow={{ md: 1 }} />

For more information about xstyled's responsive design features, check out Responsive Design documentation.