Flex

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

Open in Storybook

Import

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

Basic Usage

Preview

Code

<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

Preview

Column 1

Column 2

First (shows last)

Second (shows first)

Code

<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

Preview

Left

Center

Right

Code

<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

Preview

First

Second (grows on desktop)

Code

<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

Preview

Item 1

Item 2

Item 3

Item 4

Item 5

Code

<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

Preview

Item 1

Item 2

Item 3

Item 4

Code

<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";