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

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

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

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

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