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>