# FlexboxNode

Flex container node (`display: flex`). Chỉ chấp nhận `FlexItemNode` làm con trực tiếp.

## Resolved name

`Flexbox`

## Configurable props

### Top-level props

| Prop | Type | Description |
| --- | --- | --- |
| `hidden` | `boolean` | Ẩn node ở breakpoint `xs` (mặc định). Hỗ trợ responsive qua `sm`, `md`, `lg` |

`hidden` hỗ trợ responsive: `hidden={true}` ẩn trên mobile, `md={{ hidden: false }}` hiện lại trên desktop.

### `sx` props

```ts
sx?: {
  // flex layout
  flexDirection?: 'row' | 'column'
  flexWrap?: 'nowrap' | 'wrap' | 'wrap-reverse'
  justifyContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'
  alignItems?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'
  rowGap?: number
  columnGap?: number

  // size
  width?: number | string
  height?: number | string

  // spacing
  paddingTop?: number
  paddingRight?: number
  paddingBottom?: number
  paddingLeft?: number
  marginTop?: number
  marginRight?: number
  marginBottom?: number
  marginLeft?: number

  // border
  borderStyle?: string
  borderColor?: string
  borderTopWidth?: number
  borderRightWidth?: number
  borderBottomWidth?: number
  borderLeftWidth?: number
  borderTopLeftRadius?: number | string
  borderTopRightRadius?: number | string
  borderBottomRightRadius?: number | string
  borderBottomLeftRadius?: number | string

  // background
  backgroundColor?: string
  backgroundImage?: string
  backgroundPosition?: string
  backgroundRepeat?: string
  backgroundSize?: string
  backgroundAttachment?: string
  background?: string

  // responsive overrides
  sm?: { /* same keys above */ }
  md?: { /* same keys above */ }
  lg?: { /* same keys above */ }
}
```

## Usage

```tsx
import { FlexboxNode, FlexItemNode } from '@janbox/storefront-builder';

// Row ngang, căn giữa dọc
<FlexboxNode sx={{ flexDirection: 'row', alignItems: 'center', columnGap: 16 }}>
  <FlexItemNode>Item A</FlexItemNode>
  <FlexItemNode>Item B</FlexItemNode>
</FlexboxNode>

// Đổi direction theo breakpoint: column trên mobile, row trên desktop
<FlexboxNode
  sx={{
    flexDirection: 'column',
    rowGap: 12,
    md: {
      flexDirection: 'row',
      columnGap: 24,
      alignItems: 'center',
    },
  }}
>
  <FlexItemNode>Item A</FlexItemNode>
  <FlexItemNode>Item B</FlexItemNode>
</FlexboxNode>

// Space-between, wrap
<FlexboxNode
  sx={{
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
    rowGap: 16,
  }}
>
  <FlexItemNode>Item A</FlexItemNode>
  <FlexItemNode>Item B</FlexItemNode>
  <FlexItemNode>Item C</FlexItemNode>
</FlexboxNode>
```

## Rules

- **Canvas**: yes.
- **canMoveIn**: chỉ chấp nhận `FlexItemNode`.

## Related nodes

- [`FlexItemNode`](../flex-item/README.md) — con trực tiếp duy nhất của `FlexboxNode`