Flex

A powerful layout component built on top of Box that provides flexbox functionality with an intuitive API. Flex makes it easy to create flexible layouts with proper alignment and spacing.

Import

import { Flex } from '@beauginbey/vanilla-components';

Basic Usage

The Flex component defaults to display: flex and accepts all flexbox-related props.

import { Flex, Box, Text } from '@beauginbey/vanilla-components';

export default function App() {
  return (
    <Flex gap={4}>
      <Box p={3} backgroundColor="3" borderRadius="md">
        <Text>Item 1</Text>
      </Box>
      <Box p={3} backgroundColor="3" borderRadius="md">
        <Text>Item 2</Text>
      </Box>
      <Box p={3} backgroundColor="3" borderRadius="md">
        <Text>Item 3</Text>
      </Box>
    </Flex>
  );
}

Open Sandbox

Direction

Control the flex direction with the direction prop.

import { Flex, Box, Text } from '@beauginbey/vanilla-components';

export default function App() {
  return (
    <Flex direction="column" gap={3}>
      <Box p={3} backgroundColor="3" borderRadius="md">
        <Text>Item 1</Text>
      </Box>
      <Box p={3} backgroundColor="3" borderRadius="md">
        <Text>Item 2</Text>
      </Box>
      <Box p={3} backgroundColor="3" borderRadius="md">
        <Text>Item 3</Text>
      </Box>
    </Flex>
  );
}

Open Sandbox

Alignment

Use align and justify to control alignment.

import { Flex, Box, Text } from '@beauginbey/vanilla-components';

export default function App() {
  return (
    <Box>
      <Text weight="semibold">justify="between" align="center"</Text>
      <Box marginBottom={2} />
      <Flex 
        align="center" 
        justify="between"
        p={4}
        backgroundColor="2"
        borderRadius="lg"
        style={{ height: '120px' }}
      >
        <Box p={3} backgroundColor="4" borderRadius="md">
          <Text>Start</Text>
        </Box>
        <Box p={3} backgroundColor="4" borderRadius="md">
          <Text>Center</Text>
        </Box>
        <Box p={3} backgroundColor="4" borderRadius="md">
          <Text>End</Text>
        </Box>
      </Flex>
      
      <Box marginBottom={4} />
      
      <Text weight="semibold">justify="center" align="end"</Text>
      <Box marginBottom={2} />
      <Flex 
        align="end" 
        justify="center"
        gap={3}
        p={4}
        backgroundColor="2"
        borderRadius="lg"
        style={{ height: '120px' }}
      >
        <Box p={2} backgroundColor="4" borderRadius="md" style={{ height: '40px' }}>
          <Text size="sm">Small</Text>
        </Box>
        <Box p={3} backgroundColor="4" borderRadius="md" style={{ height: '60px' }}>
          <Text>Medium</Text>
        </Box>
        <Box p={4} backgroundColor="4" borderRadius="md" style={{ height: '80px' }}>
          <Text size="lg">Large</Text>
        </Box>
      </Flex>
    </Box>
  );
}

Open Sandbox

Wrapping

Control flex wrapping with the wrap prop.

import { Flex, Box, Text } from '@beauginbey/vanilla-components';

export default function App() {
  return (
    <Flex wrap="wrap" gap={3}>
      {[1, 2, 3, 4, 5, 6, 7, 8].map(i => (
        <Box 
          key={i}
          p={3} 
          backgroundColor="3" 
          borderRadius="md"
          style={{ minWidth: '100px' }}
        >
          <Text>Item {i}</Text>
        </Box>
      ))}
    </Flex>
  );
}

Open Sandbox

Gap Utilities

Use gap, gapX, and gapY for precise spacing control.

import { Flex, Box, Text } from '@beauginbey/vanilla-components';

export default function App() {
  return (
    <Box>
      <Text weight="semibold">Uniform gap</Text>
      <Box marginBottom={2} />
      <Flex gap={4}>
        <Box p={3} backgroundColor="3" borderRadius="md">
          <Text>Item 1</Text>
        </Box>
        <Box p={3} backgroundColor="3" borderRadius="md">
          <Text>Item 2</Text>
        </Box>
        <Box p={3} backgroundColor="3" borderRadius="md">
          <Text>Item 3</Text>
        </Box>
      </Flex>
      
      <Box marginBottom={4} />
      
      <Text weight="semibold">Different X and Y gaps</Text>
      <Box marginBottom={2} />
      <Flex direction="column" gapY={2}>
        <Flex gapX={6}>
          <Box p={3} backgroundColor="3" borderRadius="md">
            <Text>Row 1 - Item 1</Text>
          </Box>
          <Box p={3} backgroundColor="3" borderRadius="md">
            <Text>Row 1 - Item 2</Text>
          </Box>
        </Flex>
        <Flex gapX={6}>
          <Box p={3} backgroundColor="3" borderRadius="md">
            <Text>Row 2 - Item 1</Text>
          </Box>
          <Box p={3} backgroundColor="3" borderRadius="md">
            <Text>Row 2 - Item 2</Text>
          </Box>
        </Flex>
      </Flex>
    </Box>
  );
}

Open Sandbox

Responsive

All flex properties support responsive values.

import { Flex, Box, Text } from '@beauginbey/vanilla-components';

export default function App() {
  return (
    <Flex 
      direction={{ mobile: 'column', tablet: 'row' }}
      gap={{ mobile: 2, tablet: 4 }}
      align={{ mobile: 'stretch', tablet: 'center' }}
    >
      <Box p={3} backgroundColor="3" borderRadius="md" style={{ flex: 1 }}>
        <Text>Responsive Item 1</Text>
      </Box>
      <Box p={3} backgroundColor="3" borderRadius="md" style={{ flex: 1 }}>
        <Text>Responsive Item 2</Text>
      </Box>
      <Box p={3} backgroundColor="3" borderRadius="md" style={{ flex: 1 }}>
        <Text>Responsive Item 3</Text>
      </Box>
    </Flex>
  );
}

Open Sandbox

Common Patterns

Navigation Bar

import { Flex, Box, Text, Button } from '@beauginbey/vanilla-components';

export default function App() {
  return (
    <Flex 
      justify="between" 
      align="center"
      p={4}
      backgroundColor="2"
      borderRadius="lg"
    >
      <Text size="lg" weight="bold">Logo</Text>
      
      <Flex gap={4} align="center">
        <Text>Home</Text>
        <Text>About</Text>
        <Text>Services</Text>
        <Text>Contact</Text>
      </Flex>
      
      <Button size="sm">Sign In</Button>
    </Flex>
  );
}

Open Sandbox

Card Layout

import { Flex, Box, Text } from '@beauginbey/vanilla-components';

export default function App() {
  const cards = [
    { title: 'Card 1', description: 'First card description' },
    { title: 'Card 2', description: 'Second card description' },
    { title: 'Card 3', description: 'Third card description' },
  ];

  return (
    <Flex gap={4} wrap="wrap">
      {cards.map((card, index) => (
        <Box 
          key={index}
          p={4} 
          backgroundColor="2" 
          borderRadius="lg"
          style={{ flex: '1 1 300px' }}
        >
          <Text size="lg" weight="semibold">{card.title}</Text>
          <Box marginBottom={2} />
          <Text color="secondary">{card.description}</Text>
        </Box>
      ))}
    </Flex>
  );
}

Open Sandbox

Centered Content

import { Flex, Box, Text, Button } from '@beauginbey/vanilla-components';

export default function App() {
  return (
    <Flex 
      direction="column"
      align="center" 
      justify="center"
      p={8}
      backgroundColor="2"
      borderRadius="lg"
      style={{ minHeight: '300px' }}
    >
      <Text as="h2" size="2xl" weight="bold">Welcome Back</Text>
      <Box marginBottom={2} />
      <Text color="secondary">Sign in to continue to your account</Text>
      <Box marginBottom={4} />
      <Flex gap={3}>
        <Button variant="solid">Sign In</Button>
        <Button variant="outline">Create Account</Button>
      </Flex>
    </Flex>
  );
}

Open Sandbox

Props

Flex accepts all Box props plus the following flex-specific props:

Prop	Type	Default	Description
`direction`	`'row' \| 'column' \| 'row-reverse' \| 'column-reverse'`	`'row'`	Sets the flex direction
`wrap`	`'nowrap' \| 'wrap' \| 'wrap-reverse'`	`'nowrap'`	Controls flex wrapping
`justify`	`'start' \| 'center' \| 'end' \| 'between' \| 'around' \| 'evenly'`	-	Aligns items along the main axis
`align`	`'start' \| 'center' \| 'end' \| 'stretch' \| 'baseline'`	-	Aligns items along the cross axis
`gap`	`number`	-	Sets gap between items
`gapX`	`number`	-	Sets horizontal gap
`gapY`	`number`	-	Sets vertical gap

All props support responsive values.

Alignment Values

justify (main axis):
- start: flex-start
- center: center
- end: flex-end
- between: space-between
- around: space-around
- evenly: space-evenly
align (cross axis):
- start: flex-start
- center: center
- end: flex-end
- stretch: stretch
- baseline: baseline

Section Grid