Skip to content
Home

FlexContainer

Info
Demos
Properties

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>