Skip to content
Home

Flex.Container

Info
Demos
Properties

Description

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

Ideally, use Flex.Item or Card for you inner wrappers.

import { Flex } from '@dnb/eufemia'


render(
  <Flex.Container>
    <Flex.Item>content</Flex.Item>
  </Flex.Container>,
)

How spacing is applied

Nested components should preferably support spacing properties.

When a element or component was given, that does not support spacing, it will still work out of the box as it gets wrapped in a spacing block.

You may else wrap your custom component in a Flex.Item – this way, you still can change the spacing per component basis.

Technically, Flex.Container checks if a nested component has a property called _supportsSpacingProps. So if you have a component that supports the spacing properties, you can add this property ComponentName._supportsSpacingProps = true.

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>

Demos

No properties

FlexItem
FlexItem
FlexItem
FlexItem
Code Editor
<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

FlexItem
FlexItem
FlexItem
FlexItem
Code Editor
<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"

FlexItem
FlexItem
FlexItem
FlexItem
Code Editor
<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"

FlexItem
FlexItem
FlexItem
FlexItem
Code Editor
<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 with size and grow

Card contents
Card contents
Card contents
Card contents
Card contents
Card contents
Code Editor
<Flex.Horizontal>
  <Flex.Item size={3}>
    <Card>Card contents</Card>
  </Flex.Item>
  <Flex.Item size={4}>
    <Card>Card contents</Card>
  </Flex.Item>
  <Flex.Item size={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.

Code Editor
<Flex.Container>
  <Field.String label="Label" value="Foo" />
  <Field.String label="Label" value="Foo" width="medium" />
</Flex.Container>

Vertical Flex.Item

FlexItem
FlexItem
FlexItem
FlexItem
Code Editor
<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

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

Vertical space divider

Code Editor
<Card>
  <Flex.Container direction="vertical" divider="space">
    <Field.String label="Label" value="Value" />
    <Field.String label="Label" value="Value" />
  </Flex.Container>
</Card>

Vertical aligned Field.String

Code Editor
<Card>
  <Flex.Container direction="vertical">
    <Field.String label="Label" value="Foo" />
    <Field.String label="Label" value="Foo" />
  </Flex.Container>
</Card>