#Flex.Container

#Import

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

#Description

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

#Relevant links

• Source code
• Docs code

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>
    <Flex.Item>content</Flex.Item>
    <Card>content</Card>
  </Flex.Container>
)

But you can use it with what ever element too. It will wrap it in an Flex.Item to ensure the spacing is applied:

import { Flex } from '@dnb/eufemia'

render(
  <Flex.Container>
    <div>content</div>
    <div>content</div>
  </Flex.Container>
)

During render, the items within the "Wrapper" container are wrapped with the same properties. This ensures that all the items have the same appearance.

#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:

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>
  <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>
  <Flex.Item>part of horizontal alignment</Flex.Item>
  <Flex.Item>part of horizontal alignment</Flex.Item>
</Flex.Horizontal>

#Relevant links

• Source code
• Docs code

#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>...</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

<Flex.Container>
  <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

<Flex.Container>
  <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"

<Flex.Container 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"

<Flex.Container 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.

<Flex.Container 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.

<Flex.Container 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

<Flex.Horizontal>
  <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>
  <Field.String label="Label" value="Foo" width="medium" />
  <Field.String label="Label" value="Foo" width="small" />
</Flex.Container>

#Vertical Flex.Item

<Flex.Container 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

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

#Vertical line divider

<Flex.Container direction="vertical" divider="line" alignSelf="stretch">
  <TestElement>FlexItem</TestElement>
  <TestElement>FlexItem</TestElement>
  <TestElement>FlexItem</TestElement>
</Flex.Container>

#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.

const Item = () => (
  <Flex.Stack divider="line-framed" gap="x-small">
    <TestElement>FlexItem</TestElement>
    <TestElement>FlexItem</TestElement>
  </Flex.Stack>
)
render(
  <Flex.Horizontal 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.

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