# FlexBox

```ts
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.
</Note>

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"` |

```tsx
import { FlexCol, FlexRow } from "cx/widgets";

export default (
  <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>
);

```

<Note type="warning">
The `spacing` option sets a negative margin which may cause unexpected behavior in some scenarios.
</Note>

## 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`.                                                                 |