#Flex.Item

#Import

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

#Description

Flex.Item is a building block for CSS flexbox based layout of contents and components. Should be used in combination with Flex.Container.

#Relevant links

• Source code
• Docs code

import { Flex } from '@dnb/eufemia'

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

#Relevant links

• Source code
• Docs code

#Span adjustment

You can provide a span property with a number from 1 to 12 (can be changed in Flex.Container with the sizeCount property).

The number will be used to set the item span (a part of the container). It set a percentage unit and apply it on the item via CSS. When the container is tilled to 100%, the remaining items will wrap to a new row.

The number 6 results in 50%, while 12 results in 100%.

<Flex.Container>
  <Flex.Item span={6}>uses 50% in width</Flex.Item>
  <Flex.Item span={6}>uses 50% in width</Flex.Item>
</Flex.Container>

#Responsive span

You can also make spans respond to media queries.

For doing so, provide a span property with an object containing Media Query types. Each media span should contain number, like mentioned above.

<Flex.Container>
  <Flex.Item
    span={{
      small: 12,
      large: 6,
    }}
  >
    uses 50% or 100% based on the screen size
  </Flex.Item>
  <Flex.Item
    span={{
      small: 12,
      large: 6,
    }}
  >
    uses 50% or 100% based on the screen size
  </Flex.Item>
</Flex.Container>

You need to ensure that flex-wrap: wrap is set, so the remaining items wrap to a new row when needed. This is enabled by default in the Flex.Container.

#Demos

<Flex.Container>
  <Flex.Item>
    <TestElement>FlexItem</TestElement>
  </Flex.Item>
  <Flex.Item>
    <TestElement>FlexItem</TestElement>
  </Flex.Item>
</Flex.Container>

#Basic span usage

With the default sizeCount of 12 parts.

#Advanced span usage

The following example has a customized amount of 4 parts (sizeCount) as well as custom breakpoints and media queries.