Flex Direction

Utilities for controlling the direction of flex items.

Row

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

<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:

<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:

<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:

<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.