FlexWrapper

FlexWrapper renders a flex container with shorthand props for direction, alignment, justification, wrapping, gaps, and responsive breakpoint overrides.

Code

import { FlexWrapper } from "@falcon/ui-kit/dist/legacy";

export function Example() {
  return (
    <FlexWrapper
      direction="column"
      directionBreakpoints={{ xs: "column" }}
      gap={12}
      gapBreakpoints={{ sm: 8, lg: 16, xl: 20 }}
    >
      <FlexWrapper gap={16} justify="space-between">
        <strong>Current balance</strong>
        <span className="text-right">100,000.00</span>
      </FlexWrapper>

      <FlexWrapper gap={16} justify="space-between">
        <strong>Per diem</strong>
        <span className="text-right">$10.00</span>
      </FlexWrapper>

      <FlexWrapper gap={16} justify="space-between">
        <strong>Interest rate</strong>
        <span className="text-right">15%</span>
      </FlexWrapper>

      <FlexWrapper gap={16} justify="space-between">
        <strong>Payoff amount</strong>
        <span className="text-right">$101.00</span>
      </FlexWrapper>

      <FlexWrapper gap={16} justify="space-between">
        <strong>Maturity date</strong>
        <span className="text-right">12/31/2021</span>
      </FlexWrapper>
    </FlexWrapper>
  );
}

API

FlexWrapper

Props

align

align?: "center" | "flex-start" | "flex-end" | "baseline" | "stretch"

alignBreakpoints

alignBreakpoints?: Partial<Record<Breakpoint, "center" | "flex-start" | "flex-end" | "baseline" | "stretch">>

direction

direction?: "row" | "row-reverse" | "column" | "column-reverse"

directionBreakpoints

directionBreakpoints?: Partial<Record<Breakpoint, "row" | "row-reverse" | "column" | "column-reverse">>

flex

flex?: "on" | "none"

gap

gap?: number

gapBreakpoints

gapBreakpoints?: Partial<Record<Breakpoint, number>>

justify

justify?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly"

justifyBreakpoints

justifyBreakpoints?: Partial<Record<Breakpoint, "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly">>

wrap

wrap?: "wrap" | "nowrap"

wrapBreakpoints

wrapBreakpoints?: Partial<Record<Breakpoint, "wrap" | "nowrap">>