Flex Direction

Utilities for controlling the direction of flex items.

React propsCSS Properties
flexDirection={direction}flex-direction: {direction};

Row

Use flexDirection="row" to position flex items horizontally in the same direction as text:

<> <template preview> <x.div display="flex" flexDirection="row" spaceX={4}> {[1, 2, 3].map((value) => ( <x.div key={value} w={16} h={16} borderRadius="md" bg="amber-500" color="white" display="flex" alignItems="center" justifyContent="center" fontSize="2xl" fontWeight="extrabold" > {value} </x.div> ))} </x.div> </template> <x.div display="flex" flexDirection="row"> <div>1</div> <div>2</div> <div>3</div> </x.div> </>

Row reversed

Use flexDirection="row-reverse" to position flex items horizontally in the opposite direction:

<> <template preview> <x.div display="flex" flexDirection="row-reverse" spaceX={4} spaceXReverse> {[1, 2, 3].map((value) => ( <x.div key={value} w={16} h={16} 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" flexDirection="row-reverse"> <div>1</div> <div>2</div> <div>3</div> </x.div> </>

Column

Use flexDirection="column" to position flex items vertically:

<> <template preview> <x.div display="flex" flexDirection="column" spaceY={4}> {[1, 2, 3].map((value) => ( <x.div key={value} h={16} 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" flexDirection="column"> <div>1</div> <div>2</div> <div>3</div> </x.div> </>

Column reversed

Use flexDirection="column-reverse" to position flex items vertically in the opposite direction:

<> <template preview> <x.div display="flex" flexDirection="column-reverse" spaceY={4} spaceYReverse > {[1, 2, 3].map((value) => ( <x.div key={value} h={16} borderRadius="md" bg="red-500" color="white" display="flex" alignItems="center" justifyContent="center" fontSize="2xl" fontWeight="extrabold" > {value} </x.div> ))} </x.div> </template> <x.div display="flex" flexDirection="column-reverse"> <div>1</div> <div>2</div> <div>3</div> </x.div> </>

Responsive

To apply a flex direction utility only at a specific breakpoint, use responsive object notation. For example, adding the property flexDirection={{ xs: 'column', md: 'row' }} to an element would apply the flexDirection="column" by default and the flexDirection="row" utility at medium screen sizes and above.

<x.div display="flex" flexDirection={{ xs: 'column', md: 'row' }}> {/* ... */} </x.div>

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

Edit this page on GitHub