Skip to content
Home

Flex.Container

Info
Demos
Properties

Demos

No properties

FlexItem
FlexItem
FlexItem
FlexItem
Code Editor
<Flex.Container>
  <Flex.Item>
    <TestElement>FlexItem</TestElement>
  </Flex.Item>
  <Flex.Item>
    <TestElement>FlexItem</TestElement>
  </Flex.Item>
  <Flex.Item>
    <TestElement>FlexItem</TestElement>
  </Flex.Item>
  <Flex.Item>
    <TestElement>FlexItem</TestElement>
  </Flex.Item>
</Flex.Container>

Horizontal Flex.Item

FlexItem
FlexItem
FlexItem
FlexItem
Code Editor
<Flex.Container>
  <Flex.Item>
    <TestElement>FlexItem</TestElement>
  </Flex.Item>
  <Flex.Item>
    <TestElement>FlexItem</TestElement>
  </Flex.Item>
  <Flex.Item>
    <TestElement>FlexItem</TestElement>
  </Flex.Item>
  <Flex.Item>
    <TestElement>FlexItem</TestElement>
  </Flex.Item>
</Flex.Container>

Horizontal Flex.Item, justify="center"

FlexItem
FlexItem
FlexItem
FlexItem
Code Editor
<Flex.Container justify="center">
  <Flex.Item>
    <TestElement>FlexItem</TestElement>
  </Flex.Item>
  <Flex.Item>
    <TestElement>FlexItem</TestElement>
  </Flex.Item>
  <Flex.Item>
    <TestElement>FlexItem</TestElement>
  </Flex.Item>
  <Flex.Item>
    <TestElement>FlexItem</TestElement>
  </Flex.Item>
</Flex.Container>

Horizontal Flex.Item, justify="flex-end"

FlexItem
FlexItem
FlexItem
FlexItem
Code Editor
<Flex.Container justify="flex-end">
  <Flex.Item>
    <TestElement>FlexItem</TestElement>
  </Flex.Item>
  <Flex.Item>
    <TestElement>FlexItem</TestElement>
  </Flex.Item>
  <Flex.Item>
    <TestElement>FlexItem</TestElement>
  </Flex.Item>
  <Flex.Item>
    <TestElement>FlexItem</TestElement>
  </Flex.Item>
</Flex.Container>

Horizontal with size and grow

Card contents
Card contents
Card contents
Card contents
Card contents
Card contents
Code Editor
<Flex.Horizontal>
  <Flex.Item size={3}>
    <Card>Card contents</Card>
  </Flex.Item>
  <Flex.Item size={4}>
    <Card>Card contents</Card>
  </Flex.Item>
  <Flex.Item size={5}>
    <Card>Card contents</Card>
  </Flex.Item>
  <Flex.Item grow>
    <Card>Card contents</Card>
  </Flex.Item>
  <Flex.Item grow>
    <Card>Card contents</Card>
  </Flex.Item>
  <Flex.Item grow>
    <Card>Card contents</Card>
  </Flex.Item>
</Flex.Horizontal>

Horizontal Field.String

Will wrap on small screens.

Code Editor
<Flex.Container>
  <Field.String label="Label" value="Foo" />
  <Field.String label="Label" value="Foo" width="medium" />
</Flex.Container>

Vertical Flex.Item

FlexItem
FlexItem
FlexItem
FlexItem
Code Editor
<Flex.Container direction="vertical">
  <Flex.Item>
    <TestElement>FlexItem</TestElement>
  </Flex.Item>
  <Flex.Item>
    <TestElement>FlexItem</TestElement>
  </Flex.Item>
  <Flex.Item>
    <TestElement>FlexItem</TestElement>
  </Flex.Item>
  <Flex.Item>
    <TestElement>FlexItem</TestElement>
  </Flex.Item>
</Flex.Container>

Vertical aligned Card

Card contents
Card contents
Card contents
Code Editor
<Flex.Container direction="vertical">
  <Card>Card contents</Card>
  <Card>Card contents</Card>
  <Card>Card contents</Card>
</Flex.Container>

Vertical space divider

Code Editor
<Card>
  <Flex.Container direction="vertical" divider="space">
    <Field.String label="Label" value="Value" />
    <Field.String label="Label" value="Value" />
  </Flex.Container>
</Card>

Vertical aligned Field.String

Code Editor
<Card>
  <Flex.Container direction="vertical">
    <Field.String label="Label" value="Foo" />
    <Field.String label="Label" value="Foo" />
  </Flex.Container>
</Card>