Skip to content
Home

Flex.Container

Info
Demos
Properties

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.

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 _supportsEufemiaSpacingProps. So if you have a component that supports the spacing properties, you can add this property ComponentName._supportsEufemiaSpacingProps = true.

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>

Demos

No properties

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

Horizontal Flex.Item

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

Horizontal Flex.Item, justify="center"

FlexItem
FlexItem
FlexItem
FlexItem
Code Editor
<Flex.Container justify="center">
  <Flex.Item>
    <TestElement>FlexItem</TestElement>
  </Flex.Item>
  <Flex.Item>
    <TestElement>FlexItem</TestElement>
  </Flex.Item>
  <Flex.Item>
    <TestElement>FlexItem</TestElement>
  </Flex.Item>
  <Flex.Item>
    <TestElement>FlexItem</TestElement>
  </Flex.Item>
</Flex.Container>

Horizontal Flex.Item, justify="flex-end"

FlexItem
FlexItem
FlexItem
FlexItem
Code Editor
<Flex.Container justify="flex-end">
  <Flex.Item>
    <TestElement>FlexItem</TestElement>
  </Flex.Item>
  <Flex.Item>
    <TestElement>FlexItem</TestElement>
  </Flex.Item>
  <Flex.Item>
    <TestElement>FlexItem</TestElement>
  </Flex.Item>
  <Flex.Item>
    <TestElement>FlexItem</TestElement>
  </Flex.Item>
</Flex.Container>

Horizontal with size and grow

Card contents
Card contents
Card contents
Card contents
Card contents
Card contents
Code Editor
<Flex.Horizontal>
  <Flex.Item size={3}>
    <Card>Card contents</Card>
  </Flex.Item>
  <Flex.Item size={4}>
    <Card>Card contents</Card>
  </Flex.Item>
  <Flex.Item size={5}>
    <Card>Card contents</Card>
  </Flex.Item>
  <Flex.Item grow>
    <Card>Card contents</Card>
  </Flex.Item>
  <Flex.Item grow>
    <Card>Card contents</Card>
  </Flex.Item>
  <Flex.Item grow>
    <Card>Card contents</Card>
  </Flex.Item>
</Flex.Horizontal>

Horizontal Field.String

Will wrap on small screens.

Code Editor
<Flex.Container>
  <Field.String label="Label" value="Foo" />
  <Field.String label="Label" value="Foo" width="medium" />
</Flex.Container>

Vertical Flex.Item

FlexItem
FlexItem
FlexItem
FlexItem
Code Editor
<Flex.Container direction="vertical">
  <Flex.Item>
    <TestElement>FlexItem</TestElement>
  </Flex.Item>
  <Flex.Item>
    <TestElement>FlexItem</TestElement>
  </Flex.Item>
  <Flex.Item>
    <TestElement>FlexItem</TestElement>
  </Flex.Item>
  <Flex.Item>
    <TestElement>FlexItem</TestElement>
  </Flex.Item>
</Flex.Container>

Vertical aligned Card

Card contents
Card contents
Card contents
Code Editor
<Flex.Container direction="vertical">
  <Card>Card contents</Card>
  <Card>Card contents</Card>
  <Card>Card contents</Card>
</Flex.Container>

Vertical space divider

Code Editor
<Card>
  <Flex.Container direction="vertical" divider="space">
    <Field.String label="Label" value="Value" />
    <Field.String label="Label" value="Value" />
  </Flex.Container>
</Card>

Vertical aligned Field.String

Code Editor
<Card>
  <Flex.Container direction="vertical">
    <Field.String label="Label" value="Foo" />
    <Field.String label="Label" value="Foo" />
  </Flex.Container>
</Card>