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.

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>