Flex

<Flex> turns an element into a flexbox container (.d-flex, or .d-inline-flex when inline is set) and exposes the underlying flex properties as props: direction, wrap, justify, align, alignContent, gap/rowGap/columnGap. Each takes a value, or an object with a value per breakpoint.

Reach for <Stack> first for simple one-dimensional arrangements — it wraps .hstack/.vstack with alignment defaults baked in. Reach for <Flex> instead once more control is needed than Stack's defaults give: wrapping, main-axis justification, cross-axis alignment other than Stack's fixed default, or no default flex/align behavior at all (a bare .d-flex with nothing else set).

Basic usage

With no props, <Flex> is a plain flexbox row using the browser's defaults (flex-direction: row, no wrap, items stretched to the container's cross-axis size):

import { Flex } from '@chassis-ui/react'

export const Example = () => {
  return (
    <Flex gap="md">
      <div>First item</div>
      <div>Second item</div>
      <div>Third item</div>
    </Flex>
  )
}

Direction

direction sets flex-direction. Omit it for the browser default (row).

import { Flex } from '@chassis-ui/react'

export const Example = () => {
  return (
    <Flex direction="column" gap="md">
      <div>First item</div>
      <div>Second item</div>
      <div>Third item</div>
    </Flex>
  )
}

Justify content

justify sets justify-content, aligning items along the main axis.

import { Flex } from '@chassis-ui/react'

export const Example = () => {
  return (
    <Flex justify="between">
      <div>First item</div>
      <div>Second item</div>
      <div>Third item</div>
    </Flex>
  )
}

Align items

align sets align-items, aligning items along the cross axis.

import { Flex } from '@chassis-ui/react'

export const Example = () => {
  return (
    <Flex align="center" style={{ height: '100px' }}>
      <div>First item</div>
      <div>Second item</div>
      <div>Third item</div>
    </Flex>
  )
}

Wrap

wrap sets flex-wrap, letting items move onto new lines instead of overflowing or shrinking to fit. Once a container wraps, align still governs how each item sits within its own line; alignContent (below) governs how the lines themselves are spaced.

import { Flex } from '@chassis-ui/react'

export const Example = () => {
  return (
    <Flex wrap="wrap" gap="sm" style={{ width: '200px' }}>
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
      <div>Four</div>
      <div>Five</div>
    </Flex>
  )
}

Align content

alignContent sets align-content, distributing wrapped lines along the cross axis. It has no effect on single-line (non-wrapping) containers, so it only does something combined with wrap:

import { Flex } from '@chassis-ui/react'

export const Example = () => {
  return (
    <Flex wrap="wrap" alignContent="between" gap="sm" style={{ width: '200px', height: '220px' }}>
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
      <div>Four</div>
      <div>Five</div>
    </Flex>
  )
}

Row and column gaps

gap sets spacing on both axes at once. rowGap/columnGap control each axis independently, and take precedence over gap on their own axis — useful once a wrapped container needs different spacing between lines than between items on the same line.

import { Flex } from '@chassis-ui/react'

export const Example = () => {
  return (
    <Flex wrap="wrap" rowGap="xl" columnGap="xs" style={{ width: '200px' }}>
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
      <div>Four</div>
      <div>Five</div>
    </Flex>
  )
}

Responsive

Each of direction/wrap/justify/align/alignContent/gap/rowGap/columnGap takes an object in place of a value: base is the value from the narrowest viewport, and a key named after a breakpoint (sm/md/lg/xl/2xl) is the value from that breakpoint up, as in direction={{ base: 'column', md: 'row' }}. An object with no base leaves the prop unset below its first breakpoint. Unlike <Stack>'s direction, which relies on container queries, Flex's breakpoint classes are plain viewport min-width media queries — no .contains-inline ancestor needed. Below the md breakpoint the container stacks its children in a column; at md and above it switches to a row with items spaced apart:

import { Flex } from '@chassis-ui/react'

export const Example = () => {
  return (
    <Flex
      direction={{ base: 'column', md: 'row' }}
      gap={{ base: 'sm', md: 'md' }}
      justify={{ md: 'between' }}
    >
      <div>First item</div>
      <div>Second item</div>
      <div>Third item</div>
    </Flex>
  )
}

Item-level utilities

<Flex> covers container-level properties only. Per-item concerns — align-self, order, flex-grow/flex-shrink, flex-fill, or an auto-margin spacer like .ms-auto — apply directly via className on a child, the same as with plain chassis-css markup. Below, .ms-auto pushes everything after it to the end of the row:

import { Flex } from '@chassis-ui/react'

export const Example = () => {
  return (
    <Flex gap="md">
      <div>First item</div>
      <div className="ms-auto">Second item</div>
      <div>Third item</div>
    </Flex>
  )
}

API