Flex

Description

The Flex component is a layout component that provides a simple and intuitive API for creating flexbox layouts. It offers props for all common flexbox properties including direction, alignment, justification, wrapping, and gap spacing.

Props

Flex extends all standard HTML div attributes through Base UI’s useRender hook and accepts the following variant props:

'row' | 'column' | 'rowReverse' | 'columnReverse'

default:"row"

Controls the direction of flex items

row - Items are placed horizontally (default)
column - Items are placed vertically
rowReverse - Items are placed horizontally in reverse order
columnReverse - Items are placed vertically in reverse order

'start' | 'center' | 'end' | 'stretch' | 'baseline'

default:"stretch"

Controls alignment of items along the cross axis

start - Items align to the start of the cross axis
center - Items are centered along the cross axis
end - Items align to the end of the cross axis
stretch - Items stretch to fill the container (default)
baseline - Items align along their baseline

'start' | 'center' | 'end' | 'between'

default:"start"

Controls alignment of items along the main axis

start - Items align to the start (default)
center - Items are centered
end - Items align to the end
between - Items have space distributed between them

'noWrap' | 'wrap' | 'wrapReverse'

default:"noWrap"

Controls whether flex items wrap to new lines

noWrap - All items stay on one line (default)
wrap - Items wrap to new lines as needed
wrapReverse - Items wrap to new lines in reverse order

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large'

Controls spacing between flex items using design system tokensNumeric values (1-9):

Maps to --rs-space-1 through --rs-space-9

Named values:

extra-small - Uses --rs-space-2
small - Uses --rs-space-3
medium - Uses --rs-space-5
large - Uses --rs-space-9
extra-large - Uses --rs-space-11

'full'

Controls the width of the flex container

full - Sets width to 100%

string

Additional CSS class names to apply to the Flex container

(props: React.ComponentPropsWithRef<'div'>) => React.ReactElement

Custom render function from Base UI for advanced rendering control

React.Ref<HTMLDivElement>

A ref to access the underlying div element

Usage examples

Basic horizontal layout

import { Flex } from '@raystack/apsara';

function Example() {
  return <Flex>Content</Flex>;
}

Vertical layout

import { Flex } from '@raystack/apsara';

function Example() {
  return (
    <Flex direction="column">
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 3</div>
    </Flex>
  );
}

Centered content

import { Flex } from '@raystack/apsara';

function Example() {
  return (
    <Flex align="center" justify="center">
      Centered content
    </Flex>
  );
}

With gap spacing

import { Flex } from '@raystack/apsara';

function Example() {
  return (
    <Flex gap="medium">
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 3</div>
    </Flex>
  );
}

Space between items

import { Flex } from '@raystack/apsara';

function Example() {
  return (
    <Flex justify="between">
      <div>Left</div>
      <div>Right</div>
    </Flex>
  );
}

Wrapping layout

import { Flex } from '@raystack/apsara';

function Example() {
  return (
    <Flex wrap="wrap" gap={3}>
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 3</div>
      <div>Item 4</div>
    </Flex>
  );
}

Full width container

import { Flex } from '@raystack/apsara';

function Example() {
  return (
    <Flex width="full" justify="between">
      <div>Left</div>
      <div>Right</div>
    </Flex>
  );
}

Reverse direction

import { Flex } from '@raystack/apsara';

function Example() {
  return (
    <Flex direction="rowReverse">
      <div>First</div>
      <div>Second</div>
      <div>Third</div>
    </Flex>
  );
}

Styling notes

The Flex component uses CSS modules and applies the following base styles:

display: flex - Base flexbox display
box-sizing: border-box - Consistent box model

All variant props are mapped to corresponding CSS classes: Direction variants:

direction="row" → flex-direction: row
direction="column" → flex-direction: column
direction="rowReverse" → flex-direction: row-reverse
direction="columnReverse" → flex-direction: column-reverse

Alignment variants:

align="start" → align-items: flex-start
align="center" → align-items: center
align="end" → align-items: flex-end
align="stretch" → align-items: stretch
align="baseline" → align-items: baseline

Justification variants:

justify="start" → justify-content: flex-start
justify="center" → justify-content: center
justify="end" → justify-content: end
justify="between" → justify-content: space-between

Wrap variants:

wrap="noWrap" → flex-wrap: nowrap
wrap="wrap" → flex-wrap: wrap
wrap="wrapReverse" → flex-wrap: wrap-reverse

Box - For basic container needs
Grid - For grid-based layouts
Container - For constrained-width containers

Get Started

Guides

Layout Components

Navigation Components

Data Display

Form Components

Feedback Components

Overlay Components

Utility Components

Description

Props

Usage examples

Basic horizontal layout

Vertical layout

Centered content

With gap spacing

Space between items

Wrapping layout

Full width container

Reverse direction

Styling notes

​Description

​Props

​Usage examples

​Basic horizontal layout

​Vertical layout

​Centered content

​With gap spacing

​Space between items

​Wrapping layout

​Full width container

​Reverse direction

​Styling notes

​Related components

Description

Props

Usage examples

Basic horizontal layout

Vertical layout

Centered content

With gap spacing

Space between items

Wrapping layout

Full width container

Reverse direction

Styling notes

Related components