Skip to content
Home

FlexContainer

Info
Demos
Properties

Description

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

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 direction="horizontal">
  <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 direction="horizontal" 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 direction="horizontal" 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 Card

FlexItem
FlexItem
FlexItem
FlexItem
Code Editor
<Layout.FlexContainer direction="horizontal">
  <Layout.Card>FlexItem</Layout.Card>
  <Layout.Card>FlexItem</Layout.Card>
  <Layout.Card>FlexItem</Layout.Card>
  <Layout.Card>FlexItem</Layout.Card>
</Layout.FlexContainer>

Layout.Vertical

Card contents
Card contents
Card contents
Code Editor
<Layout.Vertical>
  <Layout.Card>Card contents</Layout.Card>
  <Layout.Card>Card contents</Layout.Card>
  <Layout.Card>Card contents</Layout.Card>
</Layout.Vertical>

Layout.Horizontal

Card contents
Card contents
Card contents
Code Editor
<Layout.Horizontal>
  <Layout.Card>Card contents</Layout.Card>
  <Layout.Card>Card contents</Layout.Card>
  <Layout.Card>Card contents</Layout.Card>
</Layout.Horizontal>
Card contents
Card contents
Card contents
Code Editor
<Layout.Horizontal>
  <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>

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
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.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" />
    <Field.String label="Label" value="Value" />
    <Field.String label="Label" value="Value" />
  </Layout.FlexContainer>
</Layout.Card>