FlexBox

import { FlexBox, FlexRow, FlexCol } from 'cx/widgets';

FlexBox is a convenience widget for setting up simple flex-box based layouts. It provides shortcut options for justifying, aligning, and adding spacing to content.

Note

FlexBox predates Tailwind CSS and is rarely used when Tailwind is available. Consider using Tailwind’s flex utilities instead.

Instead of using the base FlexBox component, you’ll typically use one of the following shortcut variants:

Component	Equivalent
`FlexRow`	`FlexBox` with `direction="row"`
`FlexCol`	`FlexBox` with `direction="column"`

 <FlexCol spacing="large">
  <div>
    <strong>spacing</strong>
    <FlexRow spacing style="border: 1px dotted lightgray">
      <div style="width: 30px; height: 30px; background: lightgray" />
      <div style="width: 40px; height: 40px; background: lightgray" />
      <div style="width: 50px; height: 50px; background: lightgray" />
    </FlexRow>
  </div>
  <div>
    <strong>justify="center"</strong>
    <FlexRow spacing justify="center" style="border: 1px dotted lightgray">
      <div style="width: 30px; height: 30px; background: lightgray" />
      <div style="width: 40px; height: 40px; background: lightgray" />
      <div style="width: 50px; height: 50px; background: lightgray" />
    </FlexRow>
  </div>
  <div>
    <strong>align="center" justify="end"</strong>
    <FlexRow
      spacing
      align="center"
      justify="end"
      style="border: 1px dotted lightgray"
    >
      <div style="width: 30px; height: 30px; background: lightgray" />
      <div style="width: 40px; height: 40px; background: lightgray" />
      <div style="width: 50px; height: 50px; background: lightgray" />
    </FlexRow>
  </div>
  <div>
    <strong>wrap pad</strong>
    <FlexRow pad spacing wrap style="border: 1px dotted lightgray">
      {Array.from({ length: 16 }).map((_, i) => (
        <div key={i} style="width: 30px; height: 30px; background: lightgray" />
      ))}
    </FlexRow>
  </div>
</FlexCol> 

spacing

justify="center"

align="center" justify="end"

wrap pad

Warning

The spacing option sets a negative margin which may cause unexpected behavior in some scenarios.

Configuration

Property	Type	Description
`direction`	`string`	Flex direction. Default is `row`. Other values: `column`, `column-reverse`, `row-reverse`.
`spacing`	`string \| boolean`	Add spacing between items. Values: `xsmall`, `small`, `medium`, `large`, `xlarge`. `true` = `medium`.
`hspacing`	`string \| boolean`	Horizontal spacing between items. Same values as `spacing`.
`vspacing`	`string \| boolean`	Vertical spacing between items. Same values as `spacing`.
`pad`	`string \| boolean`	Add padding to the box. Values: `xsmall`, `small`, `medium`, `large`, `xlarge`. `true` = `medium`.
`hpad`	`string \| boolean`	Horizontal padding. Same values as `pad`.
`vpad`	`string \| boolean`	Vertical padding. Same values as `pad`.
`align`	`string`	Alignment of items. Maps to CSS `align-items`. Default is `stretch`.
`justify`	`string`	Space distribution. Maps to CSS `justify-content`. Default is `flex-start`.
`wrap`	`boolean`	Set to `true` to allow content to wrap.
`target`	`string`	Target screen size. Values: `any`, `tablet`, `desktop`. On smaller screens, flexbox breaks into rows.
`nested`	`boolean`	Set to `true` for deeply nested flexbox calculations.
`baseClass`	`string`	Base CSS class. Default is `flexbox`.