Flex

Utilities for controlling how flex items both grow and shrink.

React propsCSS Properties
flex={value}flex: {value};

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.

Edit this page on GitHub