Skip to content
Components

Flex

Flexbox container with token-driven direction, alignment, justification, wrapping, and gap. Layout props (direction, justify, align, wrap, gap) accept a single value or a per-breakpoint responsive object like { base: "column", md: "row" }; set responsiveMode to "container" to resolve breakpoints against the nearest container instead of the viewport.

Logo
Search
Account

Usage

import { Flex, FlexProps } from "@instruments/materia-ui/components/flex";

Best practices

  • Flex exposes full flexbox (direction/justify/align/wrap) and defaults to a row; for a simple gapped column reach for Stack, for a wrapping cluster Group.

  • Every layout prop takes a responsive object like { base: "column", md: "row" }; set responsiveMode="container" to resolve breakpoints against the nearest container.

  • as and render are mutually exclusive (render wins, dev-warned); as draws from the closed layout vocabulary, so as="button" is a type error (use Button).

  • Use as to change the element (a tag); use render only to swap in a component (e.g. a router Link). Never render={<Box as=…/>} - pass as directly.

Props

PropTypeDefaultDescription
alignLayoutResponsiveValue<FlexAlign>"stretch"

Cross-axis alignment. Accepts a per-breakpoint responsive object.

as"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"

Render as a different host element from the closed layout vocabulary ({@link LayoutElement}). The set is deliberately closed: as="button" is a type error, because the design-system answer is the Button component. Event handlers and the ref accept any host element. as and render are mutually exclusive; if both are passed, render wins (a dev-only warning fires).

directionLayoutResponsiveValue<FlexDirection>"row"

Main-axis direction. Accepts a per-breakpoint responsive object.

gapLayoutResponsiveValue<"base" | "none" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "3xs">

Gap between items, from the spacing scale. Accepts a per-breakpoint responsive object.

guidelinesbooleanfalse

Show dashed outline guidelines during development.

inlinebooleanfalse

Render as inline-flex instead of flex.

justifyLayoutResponsiveValue<FlexJustify>"flex-start"

Main-axis distribution. Accepts a per-breakpoint responsive object.

responsiveModeResponsiveMode"screen"

Whether responsive values resolve against the viewport ("screen") or nearest container ("container").

wrapLayoutResponsiveValue<FlexWrap>"nowrap"

Wrap behaviour. Accepts a per-breakpoint responsive object.

refLayoutRef | undefined

Ref to the rendered host, whichever element as selects.

Also exports

  • interfaceFlexProps

Composition

Used by

AlertDialog, AttributeCard, Avatar, Breadcrumb, Card, Carousel, Chart, CheckboxCardGroup, ColorPalette, Combobox, Command, CookieBanner, DataGrid, DataGridColumnFilter, DataGridColumnHeader, DataGridPagination, DataGridTable, DeliveryBanner, Dialog, DocumentList, Drawer, EditorialCard, Empty, Field, FolderTile, InputGroup, InputOTP, Item, MarqueeText, MobileNavigationRoot, MonthYearPicker, PageHeader, PageToolbar, Pagination, ProgressDots, PromptPanel, QuickView, RadioCardGroup, RadioGroup, RequirementItem, SearchInput, SectionHeader, SegmentedControl, SettingsCard, Sheet, Sidebar, Sidepanel, SiteFooter, Slider, StreamingText, SubNavigation, Swatch, SwatchFan, TabNavigation, Tabs, TagSelector, ThinkingLoader, ThinkingTrace, Toaster, VariantSelector, LiveWaveform