Flex

Comprehensive flexbox layout component providing full control over flex properties. More powerful than Stack for complex layouts requiring precise flexbox control. Supports all flexbox properties, responsive direction changes, and flexible sizing. Ideal for navigation bars, form layouts, and sophisticated arrangements.

Live Preview

Import

import { Flex } from 'entangle-ui';

Usage

<Flex justify="space-between" align="center">
  <div>Left content</div>
  <div>Right content</div>
</Flex>

Direction

The direction prop controls the main axis orientation of flex children.

<Flex direction="row">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</Flex>

<Flex direction="column" gap={2}>
  <div>First</div>
  <div>Second</div>
  <div>Third</div>
</Flex>

<Flex direction="row-reverse">
  <div>Appears last</div>
  <div>Appears first</div>
</Flex>

Direction	Behavior
row	Left to right (default)
row-reverse	Right to left
column	Top to bottom
column-reverse	Bottom to top

Responsive Direction

Override the flex direction at different breakpoints using the sm, md, lg, and xl props. This lets you create layouts that adapt to screen size without media query boilerplate.

<Flex
  direction="column"
  md="row"
  justify="space-between"
  align="center"
  gap={2}
>
  <Logo />
  <Navigation />
  <UserMenu />
</Flex>

Breakpoint	Prop	Min Width
Small	sm	576px
Medium	md	768px
Large	lg	992px
Extra Large	xl	1200px

Justify and Align

Use justify to distribute space along the main axis and align to position items on the cross axis.

<Flex justify="space-between" align="center">
  <span>Title</span>
  <Button>Action</Button>
</Flex>

<Flex justify="center" align="center" fullHeight>
  <div>Centered content</div>
</Flex>

Gap (Spacing)

The gap prop accepts a multiplier from 0 to 8, based on a 4px base spacing unit. Use customGap for arbitrary CSS values.

<Flex gap={2}>
  <div>8px gap between items</div>
  <div>Next item</div>
</Flex>

<Flex customGap="1.5rem">
  <div>Custom gap</div>
  <div>Next item</div>
</Flex>

Gap Value	Computed Size
0	0px
1	4px
2	8px
3	12px
4	16px
5	20px
6	24px
7	28px
8	32px

Wrapping

Control how flex items wrap when they overflow the container.

<Flex wrap="wrap" gap={3} justify="center">
  <Card style={{ flexBasis: '300px' }}>Card 1</Card>
  <Card style={{ flexBasis: '300px' }}>Card 2</Card>
  <Card style={{ flexBasis: '300px' }}>Card 3</Card>
</Flex>

Use alignContent to control spacing between wrapped rows.

<Flex wrap="wrap" alignContent="space-between" style={{ height: '400px' }}>
  <div>Row 1</div>
  <div>Row 2</div>
  <div>Row 3</div>
</Flex>

Flex Item Properties

Each Flex can also behave as a flex item using grow, shrink, and basis.

<Flex direction="column" fullHeight>
  <Header />
  <Flex grow={1}>
    <Flex basis="200px" shrink={0}>
      <Sidebar />
    </Flex>
    <Flex grow={1}>
      <MainContent />
    </Flex>
  </Flex>
  <Footer />
</Flex>

Full Width and Height

Use fullWidth and fullHeight to make the container fill its parent.

<Flex fullWidth justify="space-between">
  <span>Left</span>
  <span>Right</span>
</Flex>

<Flex fullHeight direction="column" justify="center" align="center">
  <div>Vertically centered</div>
</Flex>

Size Constraints

Apply minHeight and maxWidth to constrain the flex container.

<Flex direction="column" gap={2} maxWidth="400px">
  <Input label="Email" />
  <Input label="Password" />
  <Flex justify="space-between" gap={2}>
    <Button fullWidth variant="ghost">
      Cancel
    </Button>
    <Button fullWidth variant="filled">
      Login
    </Button>
  </Flex>
</Flex>

Props

Prop	Type	Default	Description
children	ReactNode	—	Flex content -- any React elements.
direction	'row' | 'row-reverse' | 'column' | 'column-reverse'	'row'	Flex direction controlling main axis orientation.
sm	'row' | 'row-reverse' | 'column' | 'column-reverse'	—	Flex direction override at the small breakpoint (576px).
md	'row' | 'row-reverse' | 'column' | 'column-reverse'	—	Flex direction override at the medium breakpoint (768px).
lg	'row' | 'row-reverse' | 'column' | 'column-reverse'	—	Flex direction override at the large breakpoint (992px).
xl	'row' | 'row-reverse' | 'column' | 'column-reverse'	—	Flex direction override at the extra-large breakpoint (1200px).
wrap	'nowrap' | 'wrap' | 'wrap-reverse'	'nowrap'	Flex wrap behavior for overflowing items.
justify	'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'	'flex-start'	Distributes space along the main axis.
align	'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'	'stretch'	Aligns items along the cross axis.
alignContent	'flex-start' | 'flex-end' | 'center' | 'stretch' | 'space-between' | 'space-around'	'stretch'	Aligns wrapped lines. Only applies when wrap is enabled with multiple lines.
gap	0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8	0	Gap between flex items as a multiplier of the 4px base spacing unit.
customGap	string | number	—	Custom gap override as a CSS value. Overrides the gap prop when provided.
grow	number	0	Flex grow factor controlling how much the item should grow relative to siblings.
shrink	number	1	Flex shrink factor controlling how much the item should shrink relative to siblings.
basis	string | number	'auto'	Flex basis defining the initial size before free space is distributed.
fullWidth	boolean	false	Whether the flex container should fill available width (100%).
fullHeight	boolean	false	Whether the flex container should fill available height (100%).
minHeight	string | number	—	Minimum height constraint for the flex container.
maxWidth	string | number	—	Maximum width constraint for the flex container.
className	string	—	Additional CSS class names.
style	CSSProperties	—	Inline styles.
testId	string	—	Test identifier for automated testing.
ref	Ref<HTMLDivElement>	—	Ref to the underlying div element.

The component also accepts all standard HTML <div> attributes.

Accessibility

• Renders a semantic <div> element with display: flex
• No special ARIA attributes are needed for layout containers
• Ensure content within the flex container maintains a logical reading order, especially when using row-reverse or column-reverse