/ux
Components/Layout/Flex

Flex

Layout

Low-level flex container with all CSS flex props as props.

Escape hatch when Stack (vertical) or Group (horizontal, center-aligned) don't cover your layout needs. Full control over direction, wrap, align, justify, and gap.

Usage

import { Flex } from "nosible-ux"

export default function Example() {
  return (
    <Flex direction="row" wrap align="start" gap="md">
      <div>Item A</div>
      <div>Item B</div>
    </Flex>
  )
}

Examples

Wrapping tag cloud

earningsguidancemacroratesgeopoliticalsupply-chainM&A

Props

Name TypeDefaultDescription
align
FlexAlign | undefined—Cross-axis alignment (align-items). Default: 'stretch'.
asChild
boolean | undefined—When true, merges Flex styles onto the child element instead of a wrapper div.
columnGap
number | "xs" | "sm" | "md" | "lg" | "xl" | undefined—Column-specific gap override. Takes precedence over gap for the column axis.
direction
FlexDirection | undefined—Flex direction. Default: 'row'.
gap
number | "xs" | "sm" | "md" | "lg" | "xl" | undefined—Gap between all children. Accepts a pixel number or token ('xs'|'sm'|'md'|'lg'|'xl'). Default: 20.
justify
FlexJustify | undefined—Main-axis justification (justify-content). Default: 'start'.
rowGap
number | "xs" | "sm" | "md" | "lg" | "xl" | undefined—Row-specific gap override. Takes precedence over gap for the row axis.
wrap
FlexWrap | undefined—Flex wrap behaviour. Default: 'wrap'.
← All ComponentsGetting Started →