Skip to content
Home

FlexContainer

Info
Demos
Properties

Description

Layout.FlexContainer is a building block for CSS flexbox based layout of contents and components.

Ideally, use Layout.FlexItem or Layout.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 FlexItem – this way, you still can change the spacing per component basis.

Technically, FlexContainer 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:

  • <Layout.Vertical> instead of <Layout.FlexContainer direction="vertical">
<Layout.Vertical>
  <Layout.FlexItem>part of vertical alignment</Layout.FlexItem>
  <Layout.FlexItem>part of vertical alignment</Layout.FlexItem>
</Layout.Vertical>
  • <Layout.Horizontal> instead of <Layout.FlexContainer direction="horizontal">
<Layout.Horizontal>
  <Layout.FlexItem>part of horizontal alignment</Layout.FlexItem>
  <Layout.FlexItem>part of horizontal alignment</Layout.FlexItem>
</Layout.Horizontal>

Demos

No properties

FlexItem
FlexItem
FlexItem
FlexItem
Code Editor
<Layout.FlexContainer>
  <Layout.FlexItem>
    <TestElement>FlexItem</TestElement>
  </Layout.FlexItem>
  <Layout.FlexItem>
    <TestElement>FlexItem</TestElement>
  </Layout.FlexItem>
  <Layout.FlexItem>
    <TestElement>FlexItem</TestElement>
  </Layout.FlexItem>
  <Layout.FlexItem>
    <TestElement>FlexItem</TestElement>
  </Layout.FlexItem>
</Layout.FlexContainer>

Horizontal FlexItem

FlexItem
FlexItem
FlexItem
FlexItem
Code Editor
<Layout.FlexContainer>
  <Layout.FlexItem>
    <TestElement>FlexItem</TestElement>
  </Layout.FlexItem>
  <Layout.FlexItem>
    <TestElement>FlexItem</TestElement>
  </Layout.FlexItem>
  <Layout.FlexItem>
    <TestElement>FlexItem</TestElement>
  </Layout.FlexItem>
  <Layout.FlexItem>
    <TestElement>FlexItem</TestElement>
  </Layout.FlexItem>
</Layout.FlexContainer>

Horizontal FlexItem, justify="center"

FlexItem
FlexItem
FlexItem
FlexItem
Code Editor
<Layout.FlexContainer justify="center">
  <Layout.FlexItem>
    <TestElement>FlexItem</TestElement>
  </Layout.FlexItem>
  <Layout.FlexItem>
    <TestElement>FlexItem</TestElement>
  </Layout.FlexItem>
  <Layout.FlexItem>
    <TestElement>FlexItem</TestElement>
  </Layout.FlexItem>
  <Layout.FlexItem>
    <TestElement>FlexItem</TestElement>
  </Layout.FlexItem>
</Layout.FlexContainer>

Horizontal FlexItem, justify="flex-end"

FlexItem
FlexItem
FlexItem
FlexItem
Code Editor
<Layout.FlexContainer justify="flex-end">
  <Layout.FlexItem>
    <TestElement>FlexItem</TestElement>
  </Layout.FlexItem>
  <Layout.FlexItem>
    <TestElement>FlexItem</TestElement>
  </Layout.FlexItem>
  <Layout.FlexItem>
    <TestElement>FlexItem</TestElement>
  </Layout.FlexItem>
  <Layout.FlexItem>
    <TestElement>FlexItem</TestElement>
  </Layout.FlexItem>
</Layout.FlexContainer>

Horizontal with size and grow

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

Horizontal Field.String

Will wrap on small screens.

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

Vertical FlexItem

FlexItem
FlexItem
FlexItem
FlexItem
Code Editor
<Layout.FlexContainer direction="vertical">
  <Layout.FlexItem>
    <TestElement>FlexItem</TestElement>
  </Layout.FlexItem>
  <Layout.FlexItem>
    <TestElement>FlexItem</TestElement>
  </Layout.FlexItem>
  <Layout.FlexItem>
    <TestElement>FlexItem</TestElement>
  </Layout.FlexItem>
  <Layout.FlexItem>
    <TestElement>FlexItem</TestElement>
  </Layout.FlexItem>
</Layout.FlexContainer>

Vertical aligned Card

Card contents
Card contents
Card contents
Code Editor
<Layout.FlexContainer direction="vertical">
  <Layout.Card>Card contents</Layout.Card>
  <Layout.Card>Card contents</Layout.Card>
  <Layout.Card>Card contents</Layout.Card>
</Layout.FlexContainer>

Vertical space divider

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

Vertical aligned Field.String

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