#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

#Per-item gap overrides

With layoutEngine="css", use gapBefore or gapAfter to replace the container gap next to a specific item. They follow the container's main axis: before/after maps to left/right in horizontal layouts and top/bottom in vertical layouts. Use false to remove that gap.

Regular spacing properties such as left, right, top, and bottom are added to the resolved gap. If two adjacent items define the same gap, the following item's gapBefore takes precedence over the previous item's gapAfter.

<Flex.Horizontal layoutEngine="css" gap="small" wrap={false}>
  <Flex.Item>
    <TestElement>Default gap</TestElement>
  </Flex.Item>
  <Flex.Item gapBefore="large">
    <TestElement>Large gap before</TestElement>
  </Flex.Item>
  <Flex.Item gapAfter="xx-large">
    <TestElement>Large gap after</TestElement>
  </Flex.Item>
  <Flex.Item gapBefore="x-small">
    <TestElement>Small gap before wins</TestElement>
  </Flex.Item>
  <Flex.Item gapBefore={false} left="medium">
    <TestElement>No gap plus medium margin</TestElement>
  </Flex.Item>
</Flex.Horizontal>

#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 sets a percentage unit and applies it on the item via CSS. When the container is filled 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 a 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.