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>