# FlexItemNode

Một item trong `FlexboxNode`. Kiểm soát kích thước, grow/shrink, thứ tự của từng item trong flex container.

## Resolved name

`FlexItem`

## 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 item behavior
  flexGrow?: number     // auto grow: 1 = bật, undefined = tắt
  flexShrink?: number   // auto shrink: 0 = tắt, undefined = bật

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

  // order (thứ tự hiển thị)
  order?: 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';

// Item cố định width, item còn lại grow để fill
<FlexboxNode sx={{ flexDirection: 'row', columnGap: 16 }}>
  <FlexItemNode sx={{ width: 200 }}>Sidebar</FlexItemNode>
  <FlexItemNode sx={{ flexGrow: 1 }}>Main content</FlexItemNode>
</FlexboxNode>

// Item không shrink khi container hẹp
<FlexboxNode sx={{ flexDirection: 'row' }}>
  <FlexItemNode sx={{ flexShrink: 0, width: 120 }}>Fixed</FlexItemNode>
  <FlexItemNode sx={{ flexGrow: 1 }}>Flexible</FlexItemNode>
</FlexboxNode>

// Responsive: full width mobile, 50% desktop
<FlexboxNode sx={{ flexDirection: 'column', md: { flexDirection: 'row' } }}>
  <FlexItemNode
    sx={{
      width: '100%',
      md: { width: '50%' },
    }}
  >
    Left
  </FlexItemNode>
  <FlexItemNode
    sx={{
      width: '100%',
      md: { width: '50%' },
    }}
  >
    Right
  </FlexItemNode>
</FlexboxNode>
```

## Rules

- **Canvas**: yes — chứa bất kỳ node con nào.
- **canDrag**: false — không thể kéo ra khỏi parent. Thứ tự item được điều chỉnh qua `sx.order` trong inspector.
- **Parent**: phải là `FlexboxNode`.

## Related nodes

- [`FlexboxNode`](../flexbox/README.md) — parent bắt buộc của `FlexItemNode`