Flex

Flexbox layout component for building responsive layouts.

Flex

Flex is a flexbox layout component that makes it easy to build responsive layouts without writing custom styles.

Import

import { Flex } from 'radix-native-ui';

Usage

import { Flex, Text, Box } from 'radix-native-ui';

<Flex direction="row" gap={3}>
  <Text>Left</Text>
  <Text>Right</Text>
</Flex>

Props

Examples

Horizontal Layout

<Flex direction="row" gap={3}>
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Flex>

Vertical Layout

<Flex direction="column" gap={3}>
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Flex>

Center Content

<Flex align="center" justify="center" style={{ height: 200 }}>
  <Text>Centered content</Text>
</Flex>

Space Between

<Flex direction="row" justify="space-between">
  <Text>Left</Text>
  <Text>Right</Text>
</Flex>

Card with Actions

<Card>
  <Flex direction="column" gap={3}>
    <Flex direction="row" justify="space-between" align="center">
      <Heading size={3}>Card Title</Heading>
      <Badge>New</Badge>
    </Flex>
    <Text>Card description goes here.</Text>
    <Flex direction="row" gap={2}>
      <Button variant="soft">Cancel</Button>
      <Button>Confirm</Button>
    </Flex>
  </Flex>
</Card>

Form Layout

<Flex direction="column" gap={4}>
  <Flex direction="column" gap={2}>
    <Text weight="medium">Email</Text>
    <TextField placeholder="Enter email" />
  </Flex>

  <Flex direction="column" gap={2}>
    <Text weight="medium">Password</Text>
    <TextField placeholder="Enter password" secureTextEntry />
  </Flex>

  <Flex direction="row" justify="flex-end" gap={2}>
    <Button variant="outline">Cancel</Button>
    <Button>Sign In</Button>
  </Flex>
</Flex>

Wrapping Items

<Flex direction="row" wrap="wrap" gap={2}>
  <Badge>Tag 1</Badge>
  <Badge>Tag 2</Badge>
  <Badge>Tag 3</Badge>
  <Badge>Tag 4</Badge>
  <Badge>Tag 5</Badge>
</Flex>

Flex Grow

<Flex direction="row" gap={3}>
  <Box flex={1}>
    <Text>Flexible</Text>
  </Box>
  <Box>
    <Text>Fixed</Text>
  </Box>
</Flex>

Alignment Values

align (cross-axis)

Value	Description
flex-start	Align to start of cross axis
center	Center along cross axis
flex-end	Align to end of cross axis
stretch	Stretch to fill container
baseline	Align to text baseline

justify (main-axis)

Value	Description
flex-start	Pack to start
center	Pack to center
flex-end	Pack to end
space-between	Space between items
space-around	Space around items
space-evenly	Equal space between and around

Related

• Box - Primitive container
• Grid - Grid layout component
• Container - Responsive container