@edux-design/flex

Lightweight Flexbox primitives with a declarative API, implemented using Tailwind utility classes and small inline styles when useful. Pairs well with @edux-design/grid when you need granular control for non-grid layouts.

Install

npm i @edux-design/flex

Usage

import { Flex, FlexItem } from "@edux-design/flex";

export function Example() {
  return (
    <Flex gap={12} alignItems="center" justifyContent="between">
      <FlexItem>Left</FlexItem>
      <FlexItem grow>Growy middle</FlexItem>
      <FlexItem>Right</FlexItem>
    </Flex>
  );
}

API

Flex

• direction?: 'row'|'row-reverse'|'column'|'column-reverse' — default row.
• wrap?: 'nowrap'|'wrap'|'wrap-reverse' — default wrap.
• alignItems?: 'start'|'center'|'end'|'stretch'|'baseline'.
• justifyContent?: 'start'|'center'|'end'|'around'|'between'|'evenly'.
• alignContent?: 'start'|'center'|'end'|'around'|'between'|'evenly'|'stretch'.
• gap?: number|string — number interpreted as px using Tailwind arbitrary value gap-[<n>px].
• inline?: boolean — inline flex container.
• debug?: boolean — outlines container boxes.
• as?: ElementType — render as custom element, default div.

FlexItem

• grow?: boolean|number — boolean maps to 1; number maps to flex-grow: n.
• shrink?: boolean|number — boolean maps to 1; number maps to flex-shrink: n.
• basis?: string|number — number interpreted as px, string passed verbatim (e.g. "50%").
• alignSelf?: 'start'|'center'|'end'|'stretch'|'baseline'.
• order?: number — sets ordering among siblings.
• as?: ElementType — default div.
• debug?: boolean — outlines item boxes.

Notes

• Tailwind responsive utilities can be composed via className as needed.
• Arbitrary values are used for gap and basis so you don’t need to extend Tailwind config.