#Flex

#Import

import { Flex } from '@dnb/eufemia'

#Description

To make it easier to build application layout and form-views in line with defined design sketches, there are a number of components for layout.

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

  • Flex.Vertical can be used as an alias instead of the property direction="vertical".
  • Flex.Horizontal can be used as an alias instead of the property direction="horizontal".

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

• Flex.Stack is an outer block element for wrapping content to get the correct layout and spacing between region and region headings.

import { Flex } from '@dnb/eufemia'

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

You can find more related information in the Layout pages.

#Demos

#Used in forms

#Responsive Flex.Item

With the default sizeCount of 12 parts.

#Customized Flex.Item sizes

With a custom amount of 4 parts (sizeCount) as well as custom breakpoints and media queries.