Skip to content
Home

Flex.Container#

Info
Demos
Properties

Import#

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

Description#

Flex.Container is a building block for CSS flexbox based layout of contents and components.

Relevant links#

NB: For form layouts, use Flex.Stack instead.

You can also use Flex.Item or Card for you inner wrappers:

import { Flex, Card } from '@dnb/eufemia'


render(
  <Flex.Container layoutEngine="css">
    <Flex.Item>content</Flex.Item>
    <Card>content</Card>
  </Flex.Container>
)

You can also use it with any element. With the CSS engine, each rendered element participates in the layout directly:

import { Flex } from '@dnb/eufemia'


render(
  <Flex.Container layoutEngine="css">
    <div>content</div>
    <div>content</div>
  </Flex.Container>
)

Align vs Justify#

Flex.Container has two props for positioning its children: justify and align. These map directly to CSS flexbox properties and their effect depends on the direction of the container:

  • justify controls placement along the main axis (CSS justify-content).
  • align controls alignment along the cross axis (CSS align-items).

In practice, this means:

Flex.HorizontalFlex.Vertical
Center horizontallyjustify="center"align="center"
Center verticallyalign="center"justify="center"

The main axis follows the direction: horizontal for Flex.Horizontal, vertical for Flex.Vertical. The cross axis is always perpendicular.

Horizontal and Vertical aliases#

For shortening the usage of direction="...", you can use:

  • <Flex.Vertical> instead of <Flex.Container direction="vertical">
<Flex.Vertical layoutEngine="css">
  <Flex.Item>part of vertical alignment</Flex.Item>
  <Flex.Item>part of vertical alignment</Flex.Item>
</Flex.Vertical>
  • <Flex.Horizontal> instead of <Flex.Container direction="horizontal">
<Flex.Horizontal layoutEngine="css">
  <Flex.Item>part of horizontal alignment</Flex.Item>
  <Flex.Item>part of horizontal alignment</Flex.Item>
</Flex.Horizontal>

Relevant links#

How spacing is applied#

Flex.Container keeps the existing spacing behavior by default. This preserves layouts that depend on spacing props, generated Space wrappers, or _supportsSpacingProps.

Set layoutEngine="css" to use native CSS flex gaps. In CSS mode, React children are rendered unchanged, so intrinsic elements and custom components participate automatically through their rendered DOM roots.

const MyItem = () => (
  <>
    <Card>content</Card>
    <Card>content</Card>
  </>
)


render(
  <Flex.Container direction="vertical" layoutEngine="css">
    <MyItem />
  </Flex.Container>
)

Fragments and providers that render no DOM are transparent. In the example above, both Cards become flex items and receive the container gap.

Components that support spacing properties expose their requested spacing on the rendered root. An explicit start spacing overrides the previous item's end spacing for that pair. The first item's start and last item's end remain outer margins.

Ordinary custom components do not need a marker or wrapper to receive the container gap. Use Flex.Item when you need an explicit layout item, span sizing, or spacing props around a component that does not expose spacing on its own root.

Divider accessibility#

In CSS mode, divider="line" and divider="line-framed" are painted visual lines. Unlike the legacy engine, they do not render <hr> elements and therefore do not add separator roles to the accessibility tree. If the separation is meaningful rather than decorative, render explicit Hr elements instead of relying on the divider property.

Backwards compatibility#

The existing React child-inspection engine remains the default, so applications do not need to annotate every established layout:

<Flex.Container layoutEngine="legacy">...</Flex.Container>

Use layoutEngine="css" when migrating a layout to native gaps. The explicit layoutEngine="legacy" value is still supported when an integration needs to document that dependency.

Demos#

No properties#

FlexItem
FlexItem
FlexItem
FlexItem
<Flex.Container layoutEngine="css">
  <Flex.Item>
    <TestElement>FlexItem</TestElement>
  </Flex.Item>
  <Flex.Item>
    <TestElement>FlexItem</TestElement>
  </Flex.Item>
  <Flex.Item>
    <TestElement>FlexItem</TestElement>
  </Flex.Item>
  <Flex.Item>
    <TestElement>FlexItem</TestElement>
  </Flex.Item>
</Flex.Container>

Horizontal Flex.Item#

FlexItem
FlexItem
FlexItem
FlexItem
<Flex.Container layoutEngine="css">
  <Flex.Item>
    <TestElement>FlexItem</TestElement>
  </Flex.Item>
  <Flex.Item>
    <TestElement>FlexItem</TestElement>
  </Flex.Item>
  <Flex.Item>
    <TestElement>FlexItem</TestElement>
  </Flex.Item>
  <Flex.Item>
    <TestElement>FlexItem</TestElement>
  </Flex.Item>
</Flex.Container>

Horizontal Flex.Item, justify="center"#

FlexItem
FlexItem
FlexItem
FlexItem
<Flex.Container layoutEngine="css" justify="center">
  <Flex.Item>
    <TestElement>FlexItem</TestElement>
  </Flex.Item>
  <Flex.Item>
    <TestElement>FlexItem</TestElement>
  </Flex.Item>
  <Flex.Item>
    <TestElement>FlexItem</TestElement>
  </Flex.Item>
  <Flex.Item>
    <TestElement>FlexItem</TestElement>
  </Flex.Item>
</Flex.Container>

Horizontal Flex.Item, justify="flex-end"#

FlexItem
FlexItem
FlexItem
FlexItem
<Flex.Container layoutEngine="css" justify="flex-end">
  <Flex.Item>
    <TestElement>FlexItem</TestElement>
  </Flex.Item>
  <Flex.Item>
    <TestElement>FlexItem</TestElement>
  </Flex.Item>
  <Flex.Item>
    <TestElement>FlexItem</TestElement>
  </Flex.Item>
  <Flex.Item>
    <TestElement>FlexItem</TestElement>
  </Flex.Item>
</Flex.Container>

Horizontal Flex.Item, align="center"#

Centers items vertically inside a horizontal container.

Tall
Short
Taller
Short
<Flex.Container layoutEngine="css" align="center">
  <Flex.Item>
    <TestElement
      style={{
        height: '4rem',
      }}
    >
      Tall
    </TestElement>
  </Flex.Item>
  <Flex.Item>
    <TestElement>Short</TestElement>
  </Flex.Item>
  <Flex.Item>
    <TestElement
      style={{
        height: '6rem',
      }}
    >
      Taller
    </TestElement>
  </Flex.Item>
  <Flex.Item>
    <TestElement>Short</TestElement>
  </Flex.Item>
</Flex.Container>

Vertical Flex.Item, align="center"#

Centers items horizontally inside a vertical container.

FlexItem
Wider FlexItem
FlexItem
<Flex.Container layoutEngine="css" direction="vertical" align="center">
  <Flex.Item>
    <TestElement>FlexItem</TestElement>
  </Flex.Item>
  <Flex.Item>
    <TestElement>Wider FlexItem</TestElement>
  </Flex.Item>
  <Flex.Item>
    <TestElement>FlexItem</TestElement>
  </Flex.Item>
</Flex.Container>

Horizontal with size and grow#

Card contents
Card contents
Card contents
Card contents
Card contents
Card contents
<Flex.Horizontal layoutEngine="css">
  <Flex.Item span={3}>
    <Card>Card contents</Card>
  </Flex.Item>
  <Flex.Item span={4}>
    <Card>Card contents</Card>
  </Flex.Item>
  <Flex.Item span={5}>
    <Card>Card contents</Card>
  </Flex.Item>
  <Flex.Item grow>
    <Card>Card contents</Card>
  </Flex.Item>
  <Flex.Item grow>
    <Card>Card contents</Card>
  </Flex.Item>
  <Flex.Item grow>
    <Card>Card contents</Card>
  </Flex.Item>
</Flex.Horizontal>

Horizontal Field.String#

Will wrap on small screens.

<Flex.Container layoutEngine="css">
  <Field.String label="Label" value="Foo" width="medium" />
  <Field.String label="Label" value="Foo" width="small" />
</Flex.Container>

Vertical Flex.Item#

FlexItem
FlexItem
FlexItem
FlexItem
<Flex.Container layoutEngine="css" direction="vertical">
  <Flex.Item>
    <TestElement>FlexItem</TestElement>
  </Flex.Item>
  <Flex.Item>
    <TestElement>FlexItem</TestElement>
  </Flex.Item>
  <Flex.Item>
    <TestElement>FlexItem</TestElement>
  </Flex.Item>
  <Flex.Item>
    <TestElement>FlexItem</TestElement>
  </Flex.Item>
</Flex.Container>

Vertical aligned Card#

Card contents
Card contents
Card contents
<Flex.Container layoutEngine="css" direction="vertical">
  <Card>Card contents</Card>
  <Card>Card contents</Card>
  <Card>Card contents</Card>
</Flex.Container>

Vertical line divider#

FlexItem
FlexItem
FlexItem
<Flex.Container
  layoutEngine="css"
  direction="vertical"
  divider="line"
  alignSelf="stretch"
>
  <TestElement>FlexItem</TestElement>
  <TestElement>FlexItem</TestElement>
  <TestElement>FlexItem</TestElement>
</Flex.Container>
Default gap
Large start
Small start
Medium start
First
Second
Third
Fourth
Last
First
Second
Third
Fourth
Last
First
Second

Heading

After heading
Last
First
Second

Heading

After heading
Last
Center tall
Center short
Large text
End tall
End short
Large text
Baseline tall
Baseline short
Large text
Start
Self center
Self end
Wrapped 1
Wrapped 2
Wrapped 3
Wrapped 4
RTL tall
RTL short
RTL last
First
Second
First
Last
First
Second
First
Second
First
Second
Horizontal 1
Horizontal 2
Horizontal 3
Horizontal 4
Horizontal 5
Vertical 1
Vertical 2
Vertical 3
Vertical 4
Vertical 5

Framed line dividers#

This example shows how to use the Flex.Container component to create a framed line divider (line-framed), which includes a line before the first item and above the last item.

FlexItem
FlexItem
FlexItem
FlexItem
FlexItem
FlexItem
const Item = () => (
  <Flex.Stack layoutEngine="css" divider="line-framed" gap="x-small">
    <TestElement>FlexItem</TestElement>
    <TestElement>FlexItem</TestElement>
  </Flex.Stack>
)
render(
  <Flex.Horizontal layoutEngine="css" rowGap={false}>
    <Item />
    <Item />
    <Item />
  </Flex.Horizontal>
)

Deprecated Flex.withChildren compatibility example#

Flex.withChildren is a temporary compatibility adapter for wrapper components that relied on the legacy child-inspection engine. Do not use it for new integrations.

FlexItem 1
FlexItem 2
FlexItem 3
FlexItem 4
const Wrapper = Flex.withChildren(({ children }) => {
  return <div>{children}</div>
})
render(
  <Flex.Container layoutEngine="legacy" direction="vertical">
    <TestElement>FlexItem 1</TestElement>
    <Wrapper>
      <TestElement>FlexItem 2</TestElement>
      <TestElement>FlexItem 3</TestElement>
    </Wrapper>
    <TestElement>FlexItem 4</TestElement>
  </Flex.Container>
)
Suggest an edit