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>