Flex Wrap

Utilities for controlling how flex items wrap.

React propsCSS Properties
flexWrap={keyword}flex-wrap: {keyword};

Don't wrap

Use flexWrap="nowrap" to prevent flex items from wrapping, causing inflexible items to overflow the container if necessary:

<> <template preview> <x.div display="flex" flexWrap="nowrap" spaceX={4} overflow="hidden"> {[1, 2, 3].map((value) => ( <x.div key={value} w={2 / 5} py={1} flex="none" borderRadius="md" bg="emerald-500" color="white" display="flex" alignItems="center" justifyContent="center" fontSize="2xl" fontWeight="extrabold" > {value} </x.div> ))} </x.div> </template> <x.div display="flex" flexWrap="nowrap"> <div>1</div> <div>2</div> <div>3</div> </x.div> </>

Wrap normally

Use flexWrap="wrap" to allow flex items to wrap:

<> <template preview> <x.div display="flex" flexWrap="wrap" m={-2} overflow="hidden"> {[1, 2, 3].map((value) => ( <x.div key={value} w={2 / 5} m={2} py={1} flex="none" borderRadius="md" bg="light-blue-500" color="white" display="flex" alignItems="center" justifyContent="center" fontSize="2xl" fontWeight="extrabold" > {value} </x.div> ))} </x.div> </template> <x.div display="flex" flexWrap="wrap"> <div>1</div> <div>2</div> <div>3</div> </x.div> </>

Wrap reverse

Use flexWrap="wrap-reverse" to wrap flex items in the reverse direction:

<> <template preview> <x.div display="flex" flexWrap="wrap-reverse" m={-2} overflow="hidden"> {[1, 2, 3].map((value) => ( <x.div key={value} w={2 / 5} m={2} py={1} flex="none" borderRadius="md" bg="violet-500" color="white" display="flex" alignItems="center" justifyContent="center" fontSize="2xl" fontWeight="extrabold" > {value} </x.div> ))} </x.div> </template> <x.div display="flex" flexWrap="wrap-reverse"> <div>1</div> <div>2</div> <div>3</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