#Flex.Container

#Description

#Import

import { Flex } from '@dnb/eufemia'

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

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.

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

#Limitations

The Flex.Container will iterate over its childrenToReact, but not the children of the children

NB: This examples showcases the limitation:

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

// The Cards will not get the spacing applied
const MyItem = () => (
  <>
    <Card>content</Card>
    <Card>content</Card>
  </>
)

const MyContainer = () => (
  <Flex.Container>
    <MyItem />
  </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. If you provide false, it will not support spacing.

If the component is a wrapper component, and you want its children to support spacing, you can add this property ComponentName._supportsSpacingProps = 'children'.

But for simplicity, you can use the HOC Flex.withChildren:

const Wrapper = Flex.withChildren(({ children }) => {
  return <div>{children}</div>
})

render(
  <Flex.Container direction="vertical">
    <Item />
    <Wrapper>
      <Item />
      <Item />
    </Wrapper>
    <Item />
  </Flex.Container>,
)