Flex

A <div> (or polymorphic element) that lays out its children with CSS flexbox, with per-breakpoint responsive values for direction, align, justify, wrap, and gap.

Installation

npm install @sipe-team/flex

import '@sipe-team/flex/styles.css';

Usage

Flex defaults to direction="row" with nowrap. Give it a gap to space children out.

1

2

3

Examples

Direction

row (default), column, row-reverse, column-reverse — maps to flex-direction.

1

2

3

1

2

3

1

2

3

Align

align maps to align-items. Items below have different heights to make the effect visible.

A

B

C

Justify

justify maps to justify-content.

1

2

3

Wrap

wrap maps to flex-wrap; constrain the container's width to see items wrap onto new lines.

1

2

3

Item sizing — basis, grow, shrink

basis, grow, and shrink apply to the Flex element itself (not to its children) — use them when a Flex is nested as an item inside a parent flex container.

fixed 80px

grow 1

grow 2

Inline

inline switches display from flex to inline-flex, so the container sits inline with surrounding text instead of taking a full line.

Text before

1

2

text after

Responsive values

direction, align, justify, wrap, and gap each accept either a single value or an object keyed by breakpoint — sm (the default, no media query), md (min-width: 780px), lg (min-width: 1060px). Each breakpoint falls back to the previous one when omitted, so only the values that change need to be set. Resize the browser past 780px/1060px to see this example switch from a stacked column to a row.

1

2

3

asChild

Drops the wrapping <div> and merges the flex layout onto the element you provide.

Anatomy

import { Flex } from '@sipe-team/flex';

export default () => (
  <Flex direction="row" align="center" justify="space-between" gap="1rem">
    <div>Item</div>
    <div>Item</div>
  </Flex>
);

Renders a single <div> (or the child element when asChild is set) and forwards its ref.

API Reference

Renders a <div> (or the child element when asChild is set) and forwards its ref to that underlying element.

Prop	Type	Default	Description
direction	ResponsiveValue<'row' | 'column' | 'row-reverse' | 'column-reverse'>	'row'	flex-direction.
align	ResponsiveValue<'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline' | 'normal'>	'normal'	align-items.
justify	ResponsiveValue<'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'normal'>	'normal'	justify-content.
wrap	ResponsiveValue<'nowrap' | 'wrap' | 'wrap-reverse'>	'nowrap'	flex-wrap.
gap	ResponsiveValue<CSSProperties['gap']>	—	Gap between items. Accepts any CSS gap value or a number (px).
basis	CSSProperties['flexBasis']	—	flex-basis of the Flex element itself, as an item in its own parent.
grow	CSSProperties['flexGrow']	—	flex-grow of the Flex element itself.
shrink	CSSProperties['flexShrink']	—	flex-shrink of the Flex element itself.
inline	boolean	false	Uses inline-flex instead of flex.
asChild	boolean	false	Merge props onto the child instead of rendering a div.

ResponsiveValue<T> is T | Partial<Record<'sm' | 'md' | 'lg', T>>, exported from @sipe-team/flex along with FlexBreakpoint ('sm' | 'md' | 'lg').

Also accepts every ComponentProps<'div'> (className, style, onClick, …), forwarded to the rendered element. style is merged after the computed layout styles, so it can override them.

Known limitations

• The md/lg breakpoints (780px/1060px) are hardcoded locally rather than sourced from @sipe-team/tokens — the token package's layout breakpoints are deprecated, and Flex keeps these values in place until replacement tokens ship. They may change in a future version.
• Only direction, align, justify, wrap, and gap are responsive. basis, grow, shrink, and inline apply the same value at every breakpoint.