Components · Layout
Flex
StableSince v0.0.1
Flexbox layout primitive.
import { Flex } from '@nexub/react';Examples
Default
Space between
Wrap
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| direction | 'row' | 'column' | 'row-reverse' | 'column-reverse' | — | Sets the flex-direction CSS property. |
| align | 'start' | 'center' | 'end' | 'stretch' | — | Sets the align-items CSS property. |
| justify | 'start' | 'center' | 'end' | 'between' | 'around' | — | Sets the justify-content CSS property. |
| gap | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | — | Spacing between children using design tokens. |
| wrap | boolean | — | Allows children to wrap onto multiple lines. |
On iOS & Android
Web only
Flex has no @nexub/react-native twin. On phones, follow the platform pattern instead, or compose it from the native components listed on the React Native page.