Skip to content
Home

FlexContainer

Info
Demos
Properties

Description

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

Demos

No properties

FlexItem
FlexItem
FlexItem
FlexItem
<Layout.Card>

  <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>

</Layout.Card>

Row with FlexItem

FlexItem
FlexItem
FlexItem
FlexItem
<Layout.FlexContainer direction="row">

  <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>

Row with FlexItem, justify="center"

FlexItem
FlexItem
FlexItem
FlexItem
<Layout.FlexContainer direction="row" 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>

Row with FlexItem, justify="flex-end"

FlexItem
FlexItem
FlexItem
FlexItem
<Layout.FlexContainer direction="row" 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>

Row with Card

FlexItem
FlexItem
FlexItem
FlexItem
<Layout.FlexContainer direction="row">

  <Layout.Card>FlexItem</Layout.Card>

  <Layout.Card>FlexItem</Layout.Card>

  <Layout.Card>FlexItem</Layout.Card>

  <Layout.Card>FlexItem</Layout.Card>

</Layout.FlexContainer>

Row with Field.String

<Layout.FlexContainer direction="row">

  <Field.String label="Label" value="Foo" />

  <Field.String label="Label" value="Foo" />

  <Field.String label="Label" value="Foo" />

  <Field.String label="Label" value="Foo" />

</Layout.FlexContainer>

Column with FlexItem

FlexItem
FlexItem
FlexItem
FlexItem
<Layout.FlexContainer direction="column">

  <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>

Column with Card

Card contents
Card contents
Card contents
Card contents
<Layout.FlexContainer direction="column">

  <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>

Column with Field.String

<Layout.Card>

  <Layout.FlexContainer direction="column">

    <Field.String label="Label" value="Foo" />

    <Field.String label="Label" value="Foo" />

    <Field.String label="Label" value="Foo" />

    <Field.String label="Label" value="Foo" />

  </Layout.FlexContainer>

</Layout.Card>

Column, space divider

<Layout.Card>

  <Layout.FlexContainer direction="column" 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>

Column, line divider

<Layout.Card>

  <Layout.FlexContainer direction="column" divider="line">

    <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>

Properties

PropertyTypeDescription
classNamestring(optional) Outer DOM element class name
directionstring(optional) Direction of sub components. Can be: row or column.
wrapboolean(optional) True to wrap contents if there is not enough space.
justifystring(optional) How to place sub components if there is space available in the container. Can be: flex-start, flex-end, center, space-between, space-around or space-evenly.
dividerstring(optional) How to separate sub components. Can be: space or line.
spacingstring or false(optional) How much space between sub components. Can be medium, small or false for no spacing.
childrenReact.Node(optional) Contents.