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

#Relevant links

• Source code

• Docs code

• 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 that wraps content to ensure proper layout and spacing between form elements, larger regions and headings. It stretches its content horizontally (100%).

import { Form } from '@dnb/eufemia/extensions/forms'
import { Flex } from '@dnb/eufemia'

function MyForm() {
  return (
    <Form.Handler>
      <Flex.Stack>
        <Form.MainHeading>Main heading</Form.MainHeading>
        <Form.Card>...</Form.Card>
      </Flex.Stack>
    </Form.Handler>
  )
}

You can find more related information in the Layout pages.

#Demos

#Used in forms

<Flex.Stack>
  <Form.MainHeading>Profile</Form.MainHeading>

  <Form.Card>
    <Form.SubHeading>Name</Form.SubHeading>

    <Field.String label="Fornavn" value="John" />
    <Field.String label="Etternavn" value="Smith" />
  </Form.Card>

  <Form.Card>
    <Form.SubHeading>More information</Form.SubHeading>

    <Field.NationalIdentityNumber value="20058512345" />
    <Field.Email value="john@smith.email" />
    <Field.PhoneNumber value="+4798765432" />
  </Form.Card>
</Flex.Stack>

#Responsive Flex.Item

With the default sizeCount of 12 parts.

#Customized Flex.Item spans

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