Flex

A flexible layout component built on CSS Flexbox. Provides an easy way to create responsive layouts with full control over direction, alignment, justification, and spacing.

Basic Usage

Item 1

Item 2

Item 3

import { Flex, Box } from 'uiplex';

<Flex gap={16}>
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Flex>

Direction

Row

Item 2

Item 3

Column

Item 2

Item 3

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

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

Alignment

Start

Item 2

Center

Item 2

End

Item 2

<Flex align="start" gap={12}>...</Flex>
<Flex align="center" gap={12}>...</Flex>
<Flex align="end" gap={12}>...</Flex>

Justify Content

Start

Item 2

Center

Item 2

End

Item 2

Between

Item 2

Around

Item 2

Evenly

Item 2

<Flex justify="start" gap={12}>...</Flex>
<Flex justify="center" gap={12}>...</Flex>
<Flex justify="end" gap={12}>...</Flex>
<Flex justify="between" gap={12}>...</Flex>
<Flex justify="around" gap={12}>...</Flex>
<Flex justify="evenly" gap={12}>...</Flex>

Wrap

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

<Flex wrap="wrap" gap={12}>
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
  {/* More items... */}
</Flex>

Gap

Gap 8px

Item 2

Item 3

Gap 16px

Item 2

Item 3

Gap 2rem

Item 2

Item 3

<Flex gap={8}>...</Flex>
<Flex gap={16}>...</Flex>
<Flex gap="2rem">...</Flex>

Real-World Example

Card Header

New

Card content goes here

Cancel

Save

<Flex direction="column" gap={16}>
  <Flex justify="between" align="center">
    <h3>Card Header</h3>
    <Box>New</Box>
  </Flex>
  <Box>
    <Flex direction="column" gap={8}>
      <Box>Card content</Box>
      <Flex gap={8} justify="end">
        <Box>Cancel</Box>
        <Box>Save</Box>
      </Flex>
    </Flex>
  </Box>
</Flex>

With Layout Props

Left Content

Right Content

Centered with position and size

<Flex
  direction="column"
  gap={16}
  padding={20}
  backgroundColor="var(--bg-secondary)"
  borderRadius={8}
>
  <Flex
    justify="between"
    align="center"
    padding={12}
  >
    Content
  </Flex>
  <Flex
    position="relative"
    width="100%"
    height={100}
    padding={16}
    alignItems="center"
    justifyContent="center"
  >
    Centered
  </Flex>
</Flex>

API Reference

Prop	Type	Default	Description
children	React.ReactNode	-	Child elements to be laid out
direction	"row" \| "column" \| "row-reverse" \| "column-reverse"	"row"	Direction of the flex container
align	"start" \| "end" \| "center" \| "stretch" \| "baseline"	"stretch"	Alignment of items (shorthand for alignItems)
alignItems	"flex-start" \| "flex-end" \| "center" \| "stretch" \| "baseline"	-	CSS alignItems property
justify	"start" \| "end" \| "center" \| "between" \| "around" \| "evenly"	"start"	Justification (shorthand for justifyContent)
justifyContent	"flex-start" \| "flex-end" \| "center" \| "space-between" \| "space-around" \| "space-evenly"	-	CSS justifyContent property
wrap	"nowrap" \| "wrap" \| "wrap-reverse"	"nowrap"	Whether items should wrap
gap	number \| string	-	Gap between items (number in px or string)
position	"static" \| "relative" \| "absolute" \| "fixed" \| "sticky"	-	CSS position property
top, right, bottom, left	number \| string	-	Position offsets (number in px or string)
width, height	number \| string	-	Width and height (number in px or string)
padding, margin	number \| string	-	Spacing (number in px or string)
paddingTop, paddingRight, etc.	number \| string	-	Individual spacing properties
backgroundColor, bg	string	-	Background color (bg is alias)
borderRadius	number \| string	-	Border radius
className	string	""	Additional CSS classes
style	React.CSSProperties	-	Inline styles (merged with computed styles)