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" width="medium" />
  <Field.String label="Label" value="Foo" width="small" />
</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 line divider

FlexItem
FlexItem
FlexItem
Code Editor
<Flex.Container direction="vertical" divider="line" alignSelf="stretch">
  <TestElement>FlexItem</TestElement>
  <TestElement>FlexItem</TestElement>
  <TestElement>FlexItem</TestElement>
</Flex.Container>

Framed line dividers

This example shows how to use the Flex.Container component to create a framed line divider (line-framed), which includes a line before the first item and above the last item.

FlexItem
FlexItem
FlexItem
FlexItem
FlexItem
FlexItem
Code Editor
const Item = () => (
  <Flex.Stack divider="line-framed" spacing="x-small">
    <TestElement>FlexItem</TestElement>
    <TestElement>FlexItem</TestElement>
  </Flex.Stack>
)
render(
  <Flex.Horizontal rowGap={false}>
    <Item />
    <Item />
    <Item />
  </Flex.Horizontal>,
)

Flex.withChildren

FlexItem 1
FlexItem 2
FlexItem 3
FlexItem 4
Code Editor
const Wrapper = Flex.withChildren(({ children }) => {
  return <div>{children}</div>
})
render(
  <Flex.Container direction="vertical">
    <TestElement>FlexItem 1</TestElement>
    <Wrapper>
      <TestElement>FlexItem 2</TestElement>
      <TestElement>FlexItem 3</TestElement>
    </Wrapper>
    <TestElement>FlexItem 4</TestElement>
  </Flex.Container>,
)