Skip to main content
ninna-ui

Flex

A flexible box container for building flexbox layouts with full control over direction, alignment, and spacing.

import { Flex } from "@ninna-ui/layout"
pnpm add @ninna-ui/layout

Requires @ninna-ui/core (auto-installed) + CSS setup.

View source

Usage

Import and use the Flex component in your application.

import { Flex } from "@ninna-ui/layout";


export default function Example() {
  return (
    <Flex gap="4" align="center">
      <Avatar />
      <Text>Username</Text>
    </Flex>
  );
}

Basic

Basic flex layout with row direction.

Item 1
Item 2
Item 3

Direction

Control flex direction with row, column, and reverse variants.

row

1
2
3

column

1
2
3

row-reverse

1
2
3

column-reverse

1
2
3

Gap Spacing

Control spacing between items with the gap prop.

gap="0"

1
2
3

gap="2"

1
2
3

gap="4"

1
2
3

gap="6"

1
2
3

gap="8"

1
2
3

Alignment

Align items on the cross axis.

align="start"

Short
Tall
Medium

align="center"

Short
Tall
Medium

align="end"

Short
Tall
Medium

align="stretch"

Short
Tall
Medium

align="baseline"

Short
Tall
Medium

Justify

Distribute items along the main axis.

justify="start"

A
B
C

justify="center"

A
B
C

justify="end"

A
B
C

justify="between"

A
B
C

justify="around"

A
B
C

justify="evenly"

A
B
C

Wrap

Flex items can wrap to multiple lines.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8

Inline

Use inline-flex for inline layout.

inline=false (default)

Tag 1Tag 2

Takes full width

inline=true

Tag 1Tag 2

Shrinks to content

Use Cases

Common patterns using Flex for layouts.

Header Layout

Logo
HomeAboutContact

Media Object

John Doe

Software Engineer at Company

Button Group

API Reference

Complete list of props for the Flex component.

Props

PropTypeDefaultDescription
direction'row' | 'column' | 'row-reverse' | 'column-reverse''row'Flex direction
gap'0' | '1' | '2' | '3' | '4' | '5' | '6' | '8' | '10' | '12' | '16'-Gap between items
align'start' | 'center' | 'end' | 'stretch' | 'baseline'-Align items on cross axis
justify'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'-Justify items on main axis
wrap'wrap' | 'nowrap' | 'wrap-reverse'-Flex wrap behavior
inlinebooleanfalseUse inline-flex instead of flex
classNamestring-Additional CSS classes

Accessibility

  • Flex is a pure layout component with no semantic meaning
  • Use appropriate semantic HTML elements as children
  • For navigation, wrap in a nav element
  • Ensure proper focus order is maintained