---
title: Flex.Stack
description: >-
version: 11.17.0
generatedAt: 2026-11-05T09:55:47.080Z
checksum: 090b7d977ba4be5e2c4c04d199a30a4048416c59f443a56985df2f80629d9c40
---

# Flex.Stack

## Import

```tsx
import { Flex } from '@dnb/eufemia'
render(<Flex.Stack layoutEngine="css" />)
```

## Description

`Flex.Stack` is an outer block element that wraps content to ensure proper layout and spacing between form elements, larger regions and headings.

## Relevant links

- [Source code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-eufemia/src/components/flex/Stack.tsx)
- [Docs code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-design-system-portal/src/docs/web/layout-and-typography/layout/flex/stack)

It stretches its content horizontally (100%).

It uses [Flex.Container](/web/layout-and-typography/layout/flex/container) under the hood.

## Accessibility

It uses a `section` element. Which allows you to add an `aria-label` or `aria-labelledby` to provide screen readers with landmarks.


```tsx
render(<Flex.Stack layoutEngine="css" aria-labelledby="unique-id">
        <Form.SubHeading id="unique-id">Heading</Form.SubHeading>
        <Card>
          <P>Content inside a landmark ...</P>
        </Card>
      </Flex.Stack>)
```


## Demos

### With input fields


```tsx
render(<Flex.Stack layoutEngine="css">
        <Field.String label="Label" value="Foo" />
        <Field.String label="Label" value="Foo" />
        <Form.SubmitButton />
      </Flex.Stack>)
```


### With paragraphs


```tsx
render(<Flex.Stack layoutEngine="css">
        <P>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
          cursus pharetra elit in bibendum.
        </P>
        <P>
          Praesent nunc ipsum, convallis eget convallis gravida, vehicula
          vitae metus.
        </P>
      </Flex.Stack>)
```


### With main heading


```tsx
render(<Flex.Stack layoutEngine="css">
        <Form.MainHeading>Heading</Form.MainHeading>
        <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</P>
        <P>Aliquam at felis rutrum, luctus dui at, bibendum ipsum.</P>
      </Flex.Stack>)
```


### With Card


```tsx
render(<Flex.Stack layoutEngine="css">
        <Card gap="medium">
          <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</P>
          <P>Aliquam at felis rutrum, luctus dui at, bibendum ipsum.</P>
        </Card>
        <Card gap="medium">
          <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</P>
          <P>Aliquam at felis rutrum, luctus dui at, bibendum ipsum.</P>
        </Card>
      </Flex.Stack>)
```


### With Card and heading


```tsx
render(<Flex.Stack layoutEngine="css">
        <Form.MainHeading>Main heading</Form.MainHeading>
        <Card gap="medium">
          <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</P>
          <P>Aliquam at felis rutrum, luctus dui at, bibendum ipsum.</P>
        </Card>
      </Flex.Stack>)
```


### With Card and headings


```tsx
render(<Flex.Stack layoutEngine="css">
        <Form.MainHeading>Main heading</Form.MainHeading>
        <Form.SubHeading>Sub heading</Form.SubHeading>
        <Card gap="medium">
          <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</P>
          <P>Aliquam at felis rutrum, luctus dui at, bibendum ipsum.</P>
        </Card>
      </Flex.Stack>)
```

<!-- eufemia-properties-usage:start -->
Some properties provide flexibility for specific integrations. Follow the component's usage guidance. Customizations beyond the documented patterns need a use case approved by DNB UX. [Read about intended use and customization](/web/styling-and-themes/configuration/component-properties/#intended-use-and-customization).
<!-- eufemia-properties-usage:end -->

## Properties


```json
{
  "props": {
    "direction": {
      "doc": "Direction of sub components. Can be: `horizontal` or `vertical`. Defaults to `vertical`.",
      "type": [
        "\"horizontal\"",
        "\"vertical\""
      ],
      "status": "optional"
    },
    "align": {
      "doc": "Align sub components along the cross axis (CSS `align-items`). In horizontal direction, this controls vertical alignment. In vertical direction, this controls horizontal alignment. Defaults to `stretch`.",
      "type": [
        "\"flex-start\"",
        "\"flex-end\"",
        "\"center\"",
        "\"baseline\"",
        "\"stretch\""
      ],
      "status": "optional"
    },
    "alignSelf": {
      "doc": "Align the Stack itself when it is a flex item in an outer container (CSS `align-self`). Defaults to `stretch`.",
      "type": [
        "\"flex-start\"",
        "\"flex-end\"",
        "\"center\"",
        "\"baseline\"",
        "\"stretch\""
      ],
      "status": "optional"
    },
    "gap": {
      "doc": "How much space between child items. Use `false` for no spacing. In vertical direction, `rowGap` is used instead when both are set. Defaults to `medium`, or `small` when `divider` is `line` or `line-framed`.",
      "type": [
        "\"xx-small\"",
        "\"x-small\"",
        "\"small\"",
        "\"medium\"",
        "\"large\"",
        "\"x-large\"",
        "\"xx-large\"",
        "false"
      ],
      "status": "optional"
    },
    "element": {
      "doc": "Define the type of element. Defaults to `section`.",
      "type": [
        "string",
        "React.Element"
      ],
      "status": "optional"
    },
    "[Flex.Container](/web/layout-and-typography/layout/flex/container/properties)": {
      "doc": "Flex.Container properties.",
      "type": "Various",
      "status": "optional"
    },
    "[Space](/web/layout-and-typography/layout/space/properties)": {
      "doc": "Spacing properties like `top` or `bottom` are supported.",
      "type": [
        "string",
        "object"
      ],
      "status": "optional"
    }
  },
  "usageGuidance": "Some properties provide flexibility for specific integrations. Follow the component's usage guidance. Customizations beyond the documented patterns need a use case approved by DNB UX. [Read about intended use and customization](/web/styling-and-themes/configuration/component-properties/#intended-use-and-customization)."
}
```