Flex

Flex is an explicit flexbox container with shorthand props for common flexbox properties. It provides more granular control than Stack.

Import

import { Flex } from "@tosui/react";

Basic Usage

Code
Preview

<Flex gap={4}>
  <Box p={4} bg="primary-subtle">Item 1</Box>
  <Box p={4} bg="accent-subtle">Item 2</Box>
  <Box p={4} bg="success-subtle">Item 3</Box>
</Flex>

Direction

Code
Preview

<Flex direction="column" gap={4}>
  <Box p={4} bg="primary-subtle">Column 1</Box>
  <Box p={4} bg="accent-subtle">Column 2</Box>
</Flex>

<Flex direction="row-reverse" gap={4}>
  <Box p={4} bg="primary-subtle">First (shows last)</Box>
  <Box p={4} bg="accent-subtle">Second (shows first)</Box>
</Flex>

Alignment

Code
Preview

<Flex justify="space-between" align="center" p={4} bg="surface" border="thin" borderColor="border">
  <Box p={2} bg="primary-subtle">Left</Box>
  <Box p={4} bg="accent-subtle">Center</Box>
  <Box p={2} bg="success-subtle">Right</Box>
</Flex>

Responsive Direction

Code
Preview

<Flex direction={{ base: "column", md: "row" }} gap={4} align={{ base: "stretch", md: "center" }}>
  <Box p={4} bg="primary-subtle">First</Box>
  <Box p={4} bg="accent-subtle" grow={1}>Second (grows on desktop)</Box>
</Flex>

Wrapping

Code
Preview

<Flex wrap="wrap" gap={4}>
  <Box p={4} bg="primary-subtle" minW="120px">Item 1</Box>
  <Box p={4} bg="accent-subtle" minW="120px">Item 2</Box>
  <Box p={4} bg="success-subtle" minW="120px">Item 3</Box>
  <Box p={4} bg="warning-subtle" minW="120px">Item 4</Box>
  <Box p={4} bg="error-subtle" minW="120px">Item 5</Box>
</Flex>

Flex Item Properties

Flex supports grow, shrink, and basis for controlling the flex container itself.

<Flex grow={1} shrink={0} basis="200px">
  This flex container will grow to fill space
</Flex>

Separate Row and Column Gaps

Code
Preview

<Flex wrap="wrap" gapRow={2} gapColumn={8}>
  <Box p={4} bg="primary-subtle" minW="100px">Item 1</Box>
  <Box p={4} bg="accent-subtle" minW="100px">Item 2</Box>
  <Box p={4} bg="success-subtle" minW="100px">Item 3</Box>
  <Box p={4} bg="warning-subtle" minW="100px">Item 4</Box>
</Flex>

Props Reference

All convenience props (direction, align, justify, wrap, alignSelf) accept responsive objects in addition to simple values.

Prop	Type	Default	Description
direction	`ResponsiveValue<"row" \| "column" \| "row-reverse" \| "column-reverse">`	`"row"`	Flex direction
wrap	`ResponsiveValue<"nowrap" \| "wrap" \| "wrap-reverse">`	`"nowrap"`	Flex wrap behavior
justify	`ResponsiveValue<"start" \| "center" \| "end" \| "space-between" \| "space-around" \| "space-evenly">`	-	Main-axis alignment
align	`ResponsiveValue<"start" \| "center" \| "end" \| "stretch" \| "baseline">`	-	Cross-axis alignment
alignContent	`ResponsiveValue<"start" \| "center" \| "end" \| "space-between" \| "space-around" \| "space-evenly">`	-	Multi-line alignment
gap	`ResponsiveValue<0-32>`	-	Gap between children
gapRow	`ResponsiveValue<0-32>`	-	Row gap
gapColumn	`ResponsiveValue<0-32>`	-	Column gap
basis	`string`	-	Flex basis
grow	`number`	-	Flex grow
shrink	`number`	-	Flex shrink
alignSelf	`ResponsiveValue<"auto" \| "start" \| "center" \| "end" \| "stretch" \| "baseline">`	-	Self alignment in parent flex
as	`ElementType`	`"div"`	HTML element to render

TypeScript

import { Flex, type FlexProps, type FlexOwnProps } from "@tosui/react";

Import​

Basic Usage​

Direction​

Alignment​

Responsive Direction​

Wrapping​

Flex Item Properties​

Separate Row and Column Gaps​

Props Reference​

TypeScript​