# BlockStack
This structures layout elements along the vertical axis of the page. It's useful for vertical alignment.
### Laying out elements in a column

```tsx
import React from 'react';
import {
  render,
  BlockStack,
} from '@shopify/ui-extensions-react/admin';

render('Playground', () => <App />);

function App() {
  return (
    <BlockStack gap>
      <>Child 1</>
      <>Child 2</>
      <>Child 3</>
      <>Child 4</>
    </BlockStack>
  );
}

```

```js
import {
  extension,
  BlockStack,
} from '@shopify/ui-extensions/admin';

export default extension(
  'Playground',
  (root) => {
    const blockStack = root.createComponent(
      BlockStack,
      {
        gap: true,
      },
      [
        root.createText('Child 1'),
        root.createText('Child 2'),
        root.createText('Child 3'),
        root.createText('Child 4'),
      ],
    );

    root.appendChild(blockStack);
  },
);

```


## BlockStackProps

### BlockStackProps

### accessibilityLabel
A label that describes the purpose or contents of the element. When set,
it will be announced to buyers using assistive technologies and will
provide them with more context.
### inlineAlignment
Position children along the main axis
### blockAlignment
Position children along the cross axis
### accessibilityRole
Sets the semantic meaning of the component’s content. When set,
the role will be used by assistive technologies to help users
navigate the page.
### id
A unique identifier for the element.
### blockSize
Adjust the block size.

- `number`: size in pixels.
- `` `${number}%` ``: size in percentages of the available space.
### minBlockSize
Adjust the minimum block size.

- `number`: size in pixels.
- `` `${number}%` ``: size in percentages of the available space.
### maxBlockSize
Adjust the maximum block size.

- `number`: size in pixels.
- `` `${number}%` ``: size in percentages of the available space.
### inlineSize
Adjust the inline size.

- `number`: size in pixels.
- `` `${number}%` ``: size in percentages of the available space.
### minInlineSize
Adjust the minimum inline size.

- `number`: size in pixels.
- `` `${number}%` ``: size in percentages of the available space.
### maxInlineSize
Adjust the maximum inline size.

- `number`: size in pixels.
- `` `${number}%` ``: size in percentages of the available space.
### padding
Adjust the padding.

To shorten the code, it is possible to specify all the padding for all edges of the box in one property.

- `base` means block-start, inline-end, block-end and inline-start paddings are `base`.
- `base none` means block-start and block-end paddings are `base`, inline-start and inline-end paddings are `none`.
- `base none large` means block-start padding is `base`, inline-end padding is `none`, block-end padding is `large` and inline-start padding is `none`.
- `base none large small` means block-start padding is `base`, inline-end padding is `none`, block-end padding is `large` and inline-start padding is `small`.
- `true` applies a default padding that is appropriate for the component.

Learn more about the 1-to-4-value syntax at https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box
### paddingBlock
Adjust the block-padding.

- `base none` means block-start padding is `base`, block-end padding is `none`.
### paddingBlockStart
Adjust the block-start padding.
### paddingBlockEnd
Adjust the block-end padding.
### paddingInline
Adjust the inline padding.

- `base none` means inline-start padding is `base`, inline-end padding is `none`.
### paddingInlineStart
Adjust the inline-start padding.
### paddingInlineEnd
Adjust the inline-end padding.
### gap
Adjust spacing between children
### blockGap
Adjust spacing between elements in the block axis.

Alias for `rowGap`
### rowGap
Adjust spacing between children in the block axis
### CrossAxisAlignment

'start' | 'center' | 'end' | 'baseline'
### MainAxisAlignment

'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly'
### AccessibilityRole

'main' | 'header' | 'footer' | 'section' | 'aside' | 'navigation' | 'ordered-list' | 'list-item' | 'list-item-separator' | 'unordered-list' | 'separator' | 'status' | 'alert' | 'generic'
### MaybeAllBoxEdgesShorthandProperty

T | `${T} ${T}` | `${T} ${T} ${T}` | `${T} ${T} ${T} ${T}`
### SpacingKeyword

'none' | 'small' | 'base' | 'large'
### MaybeTwoBoxEdgesShorthandProperty

T | `${T} ${T}`
## Related
- [InlineStack](/docs/api/admin-extensions/components/structure/InlineStack)