Flex

Utilities for controlling how flex items both grow and shrink.

Initial

Use flex="0 1 auto" to allow a flex item to shrink but not grow, taking into account its initial size:

<x.div display="flex">
  <x.div flex="0 1 auto">{/* Won't grow, but will shrink if needed */}</x.div>
  <x.div flex="0 1 auto">{/* Won't grow, but will shrink if needed */}</x.div>
  <x.div flex="0 1 auto">{/* Won't grow, but will shrink if needed */}</x.div>
</x.div>

Grow

Use flex="1 1 0" to allow a flex item to shrink but not grow, taking into account its initial size:

<x.div display="flex">
  <x.div flex="1 1 0">
    {/* Will grow and shrink as needed without taking initial size into account */}
  </x.div>
  <x.div flex="1 1 0">
    {/* Will grow and shrink as needed without taking initial size into account */}
  </x.div>
  <x.div flex="1 1 0">
    {/* Will grow and shrink as needed without taking initial size into account */}
  </x.div>
</x.div>

Responsive

To control how flex items wrap at a specific breakpoint, use responsive object notation. For example, adding the property flexWrap={{ md: 'wrap-reverse' }} to an element would apply the flexWrap="wrap-reverse" utility at medium screen sizes and above.

<x.div display="flex" flexWrap={{ md: 'wrap-reverse' }}>
  {/* ... */}
</x.div>

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