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>

Widths

No width (default)

Contents

Small

Cont.

Medium

Contents

Large

Contents
<Layout.Card>

  <p>No width (default)</p>

  <Layout.FlexContainer>

    <TestElement>Contents</TestElement>

  </Layout.FlexContainer>

  <p>Small</p>

  <Layout.FlexContainer width="small">

    <TestElement>Cont.</TestElement>

  </Layout.FlexContainer>

  <p>Medium</p>

  <Layout.FlexContainer width="medium">

    <TestElement>Contents</TestElement>

  </Layout.FlexContainer>

  <p>Large</p>

  <Layout.FlexContainer width="large">

    <TestElement>Contents</TestElement>

  </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.
widthstring or false(optional)small, medium or large for predefined standard widths.
childrenReact.Node(optional) Contents.