# Component/Stack/Stack

> Props: component-stack-stack.props.txt

## Examples


### Align

```tsx
{
  render: args => <Stack {...args} style={AREA_STYLE}>
      <Boxes />
    </Stack>,
  args: {
    style: AREA_STYLE
  },
  render: args => {
    const [align, setAlign] = useState<React.CSSProperties['alignItems']>('');
    const items: React.CSSProperties['alignItems'][] = ['flex-start', 'center', 'flex-end'];
    return <div>
        <RadioGroup size='large' value={align} onChange={value => setAlign(value)} items={items.map(value => ({
        label: value,
        value: value
      }))} />
        <Stack {...args} align={align}>
          <Boxes />
        </Stack>
      </div>;
  }
}
```

### Base

```tsx
{
  render: args => <Stack {...args} style={AREA_STYLE}>
      <Boxes />
    </Stack>
}
```

### Direction

```tsx
{
  render: args => <Stack {...args} style={AREA_STYLE}>
      <Boxes />
    </Stack>,
  args: {
    style: AREA_STYLE
  },
  render: args => {
    const [direction, setDirection] = useState<React.CSSProperties['flexDirection']>('row');
    const items: React.CSSProperties['flexDirection'][] = ['row', 'row-reverse', 'column', 'column-reverse'];
    return <div>
        <RadioGroup size='large' value={direction} onChange={value => setDirection(value)} items={items.map(value => ({
        label: value,
        value: value
      }))} />
        <Stack {...args} direction={direction}>
          <Boxes />
        </Stack>
      </div>;
  }
}
```

### Flex

```tsx
{
  render: args => <Stack {...args} style={AREA_STYLE}>
      <Boxes />
    </Stack>,
  render: () => <Stack style={AREA_STYLE}>
      <Stack justify='center' align='center' flex='0 0 200px' style={{
      height: 100,
      background: colors.red400
    }}>
        flex: 0 0 200px
      </Stack>
      <Stack justify='center' align='center' flex='1' style={{
      height: 100,
      background: colors.blue500
    }}>
        flex: 1
      </Stack>
      <Stack justify='center' align='center' flex='auto' style={{
      height: 100,
      background: colors.green500
    }}>
        flex: auto
      </Stack>
    </Stack>
}
```

### Gap

```tsx
{
  render: args => <Stack {...args} style={AREA_STYLE}>
      <Boxes />
    </Stack>,
  args: {
    wrap: 'wrap',
    style: AREA_STYLE,
    width: 400
  },
  render: args => {
    const [gap, setGap] = useState<number | string>('');
    const items: Array<number | string> = [10, '20px', '20px 10px'];
    return <div>
        <RadioGroup size='large' value={gap} onChange={value => setGap(value)} items={items.map(value => ({
        label: value,
        value: value
      }))} />
        <Stack {...args} gap={gap}>
          <Box background={colors.red400} />
          <Box background={colors.blue500} />
          <Box background={colors.green500} />
          <Box background={colors.orange300} />
          <Box background={colors.red400} />
          <Box background={colors.blue500} />
          <Box background={colors.green500} />
          <Box background={colors.orange300} />
        </Stack>
      </div>;
  }
}
```

### Inline

```tsx
{
  render: args => <Stack {...args} style={AREA_STYLE}>
      <Boxes />
    </Stack>,
  args: {
    inline: true
  },
  render: args => <Stack {...args} style={AREA_STYLE}>
      <Boxes />
    </Stack>
}
```

### Justify

```tsx
{
  render: args => <Stack {...args} style={AREA_STYLE}>
      <Boxes />
    </Stack>,
  args: {
    style: AREA_STYLE
  },
  render: args => {
    const [justify, setJustify] = useState<React.CSSProperties['justifyContent']>('');
    const items: React.CSSProperties['justifyContent'][] = ['flex-start', 'center', 'flex-end', 'space-between', 'space-around', 'space-evenly'];
    return <div>
        <RadioGroup size='large' value={justify} onChange={value => setJustify(value)} items={items.map(value => ({
        label: value,
        value: value
      }))} />
        <Stack {...args} justify={justify}>
          <Boxes />
        </Stack>
      </div>;
  }
}
```

### Wrap

```tsx
{
  render: args => <Stack {...args} style={AREA_STYLE}>
      <Boxes />
    </Stack>,
  args: {
    style: {
      ...AREA_STYLE,
      padding: 10
    },
    width: 320
  },
  render: args => {
    const [wrap, setWrap] = useState<React.CSSProperties['flexWrap']>();
    return <div>
        <RadioGroup<React.CSSProperties['flexWrap']> size='large' value={wrap} onChange={value => setWrap(value)} items={[{
        label: 'nowrap',
        value: 'nowrap'
      }, {
        label: 'wrap',
        value: 'wrap'
      }, {
        label: 'wrap-reverse',
        value: 'wrap-reverse'
      }]} />
        <Stack {...args} wrap={wrap}>
          {Object.values(colors).splice(25, 10).map(value => <Box key={value} background={value} style={{
          flexShrink: 0
        }} />)}
        </Stack>
      </div>;
  }
}
```