#Flex.Container

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

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