FlexWrapper

Import from @falcon/ui-kit/dist/legacy, not @falcon/ui-kit.

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

Primary

Code

<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

Name	Type/Description
align	"center" | "baseline" | "flex-start" | "flex-end" | "stretch" | undefined
alignBreakpoints	Partial<Record<Breakpoint, "center" | "baseline" | "flex-start" | "flex-end" | "stretch">> | undefined
direction	"row" | "row-reverse" | "column" | "column-reverse" | undefined
directionBreakpoints	Partial<Record<Breakpoint, "row" | "row-reverse" | "column" | "column-reverse">> | undefined
flex	"none" | "on" | undefined
gap	number | undefined
gapBreakpoints	Partial<Record<Breakpoint, number>> | undefined
justify	"center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | undefined
justifyBreakpoints	Partial<Record<Breakpoint, "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly">> | undefined
wrap	"wrap" | "nowrap" | undefined
wrapBreakpoints	Partial<Record<Breakpoint, "wrap" | "nowrap">> | undefined