Skip to main content

Flex

A container for flex layouts with fully responsive props and shared layout shorthands (padding, sizes, position, overflow, etc.).
By default it renders a div. You can change the element via the component prop.

Import​

import { Flex } from "@libdev-ui/base";

Demo​

Usage​

import * as React from "react";
import { Flex, Box } from "@libdev-ui/base";

export default function Example(): JSX.Element {
  return (
    <Flex gap={12} align="center" justify="start">
      <Box sl={{ 
      width: 64, 
      height: 64, 
      background: "var(--color-primary, #3b82f6)", 
      borderRadius: 8 
      }} />
      <Box sl={{ width: 64, height: 64, background: "var(--color-primary, #3b82f6)", borderRadius: 8 }} />
      <Box sl={{ width: 64, height: 64, background: "var(--color-primary, #3b82f6)", borderRadius: 8 }} />
    </Flex>
  );
}

Responsive behavior​

All core props accept responsive values keyed by breakpoints: xs | sm | md | lg | xl.

If you pass numbers to spacing-related props (gap, p, px, etc.), they will use your theme spacing scale if available (theme.spacing(n)), otherwise numbers are interpreted as px.

import * as React from "react";
import { Flex } from "@libdev-ui/base";

export default function ResponsiveDemo(): JSX.Element {
  return (
    <Flex
      direction={{ xs: "column", md: "row" }}
      gap={{ xs: 8, md: 16 }}
      align={{ xs: "stretch", md: "center" }}
      justify={{ md: "between" }}
      p={{ xs: 8, md: 16 }}
      style={{ border: "1px dashed #999", borderRadius: 8 }}
    >
      <div style={{ width: 64, height: 64, background: "#3b82f6", borderRadius: 8 }} />
      <div style={{ width: 64, height: 64, background: "#3b82f6", borderRadius: 8 }} />
      <div style={{ width: 64, height: 64, background: "#3b82f6", borderRadius: 8 }} />
      <div style={{ width: 64, height: 64, background: "#3b82f6", borderRadius: 8 }} />
    </Flex>
  );
}
tip

Numeric spacing (e.g. gap={8} or p={{ xs: 8, md: 16 }}) uses your theme spacing scale if theme.spacing is provided (e.g. spacing(1) = 8px). If the theme doesn't provide a spacing function, numbers are treated as px.

Positioning & sizes​

import * as React from "react";
import { Flex } from "@libdev-ui/base";

export default function Positioning(): JSX.Element {
  return (
    <div style={{ position: "relative", height: 160, border: "1px solid #ddd", borderRadius: 8 }}>
      <Flex position="absolute" top={{ xs: 8, md: 16 }} right={{ xs: 8, md: 16 }} gap={8}>
        <div style={{ width: 64, height: 64, background: "#3b82f6", borderRadius: 8 }} />
        <div style={{ width: 64, height: 64, background: "#3b82f6", borderRadius: 8 }} />
      </Flex>
    </div>
  );
}

Props​

Flex-specific​

PropTypeDefaultDescription
componentElementType—Polymorphic root element (e.g. 'span', custom component).
directionResponsive<"row" | "row-reverse" | "column" | "column-reverse">—Maps to flex-direction.
alignResponsive<"stretch" | "start" | "center" | "end" | "baseline">—Maps to align-items (start/end → flex-start/flex-end).
justifyResponsive<"start" | "center" | "end" | "between" | "around" | "evenly">—Maps to justify-content (between/around/evenly → space-*).
wrapResponsive<"nowrap" | "wrap" | "wrap-reverse">—Maps to flex-wrap.
gapResponsive<string | number>—Unified gap. Numeric values use spacing/px.
gapXResponsive<string | number>—Column gap (column-gap).
gapYResponsive<string | number>—Row gap (row-gap).

Shared layout props (CommonLayoutProps)​

GroupProps
Paddingp, px, py, pt, pr, pb, pl
Sizeswidth, minWidth, maxWidth, height, minHeight, maxHeight
Positionposition, inset, top, right, bottom, left
Overflowoverflow, overflowX, overflowY
Flex/GridflexBasis, flexShrink, flexGrow, gridArea, gridColumn, gridColumnStart, gridColumnEnd, gridRow, gridRowStart, gridRowEnd

All shared props are Responsive<...> unless otherwise noted. Lengths may be numbers (→ px/spacing) or strings ("50%", "12rem", var(...), calc(...), etc.).

Theme notes​

  • If the theme provides breakpoints.up(key), it is used for media queries. Otherwise the default breakpoint values are used (xs:0, sm:600, md:900, lg:1200, xl:1536).
  • If the theme provides spacing(n), numeric spacing values go through that scale (e.g. spacing(1) = 8px).

Small card example​

import * as React from "react";
import { Flex } from "@libdev-ui/base";

export default function Card(): JSX.Element {
  return (
    <Flex direction="column" gap={12} p={{ xs: 12, md: 16 }} style={{ border: "1px solid #e5e7eb", borderRadius: 12 }}>
      <h3 style={{ margin: 0 }}>Card title</h3>
      <p style={{ margin: 0, color: "#6b7280" }}>Short description goes here.</p>
      <Flex justify="end" gap={8}>
        <button>Cancel</button>
        <button style={{ background: "var(--color-primary, #3b82f6)", color: "white", borderRadius: 8, padding: "6px 10px" }}>Save</button>
      </Flex>
    </Flex>
  );
}