Skip to content
Home

Flex.Container#

Info
Demos
Properties

Demos#

No properties#

FlexItem
FlexItem
FlexItem
FlexItem
<Flex.Container layoutEngine="css">
  <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
<Flex.Container layoutEngine="css">
  <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
<Flex.Container layoutEngine="css" 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
<Flex.Container layoutEngine="css" 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 Flex.Item, align="center"#

Centers items vertically inside a horizontal container.

Tall
Short
Taller
Short
<Flex.Container layoutEngine="css" align="center">
  <Flex.Item>
    <TestElement
      style={{
        height: '4rem',
      }}
    >
      Tall
    </TestElement>
  </Flex.Item>
  <Flex.Item>
    <TestElement>Short</TestElement>
  </Flex.Item>
  <Flex.Item>
    <TestElement
      style={{
        height: '6rem',
      }}
    >
      Taller
    </TestElement>
  </Flex.Item>
  <Flex.Item>
    <TestElement>Short</TestElement>
  </Flex.Item>
</Flex.Container>

Vertical Flex.Item, align="center"#

Centers items horizontally inside a vertical container.

FlexItem
Wider FlexItem
FlexItem
<Flex.Container layoutEngine="css" direction="vertical" align="center">
  <Flex.Item>
    <TestElement>FlexItem</TestElement>
  </Flex.Item>
  <Flex.Item>
    <TestElement>Wider 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
<Flex.Horizontal layoutEngine="css">
  <Flex.Item span={3}>
    <Card>Card contents</Card>
  </Flex.Item>
  <Flex.Item span={4}>
    <Card>Card contents</Card>
  </Flex.Item>
  <Flex.Item span={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.

<Flex.Container layoutEngine="css">
  <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
<Flex.Container layoutEngine="css" 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
<Flex.Container layoutEngine="css" direction="vertical">
  <Card>Card contents</Card>
  <Card>Card contents</Card>
  <Card>Card contents</Card>
</Flex.Container>

Vertical line divider#

FlexItem
FlexItem
FlexItem
<Flex.Container
  layoutEngine="css"
  direction="vertical"
  divider="line"
  alignSelf="stretch"
>
  <TestElement>FlexItem</TestElement>
  <TestElement>FlexItem</TestElement>
  <TestElement>FlexItem</TestElement>
</Flex.Container>
Default gap
Large start
Small start
Medium start
First
Second
Third
Fourth
Last
First
Second
Third
Fourth
Last
First
Second

Heading

After heading
Last
First
Second

Heading

After heading
Last
Center tall
Center short
Large text
End tall
End short
Large text
Baseline tall
Baseline short
Large text
Start
Self center
Self end
Wrapped 1
Wrapped 2
Wrapped 3
Wrapped 4
RTL tall
RTL short
RTL last
First
Second
First
Last
First
Second
First
Second
First
Second
Horizontal 1
Horizontal 2
Horizontal 3
Horizontal 4
Horizontal 5
Vertical 1
Vertical 2
Vertical 3
Vertical 4
Vertical 5

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
const Item = () => (
  <Flex.Stack layoutEngine="css" divider="line-framed" gap="x-small">
    <TestElement>FlexItem</TestElement>
    <TestElement>FlexItem</TestElement>
  </Flex.Stack>
)
render(
  <Flex.Horizontal layoutEngine="css" rowGap={false}>
    <Item />
    <Item />
    <Item />
  </Flex.Horizontal>
)

Deprecated Flex.withChildren compatibility example#

Flex.withChildren is a temporary compatibility adapter for wrapper components that relied on the legacy child-inspection engine. Do not use it for new integrations.

FlexItem 1
FlexItem 2
FlexItem 3
FlexItem 4
const Wrapper = Flex.withChildren(({ children }) => {
  return <div>{children}</div>
})
render(
  <Flex.Container layoutEngine="legacy" direction="vertical">
    <TestElement>FlexItem 1</TestElement>
    <Wrapper>
      <TestElement>FlexItem 2</TestElement>
      <TestElement>FlexItem 3</TestElement>
    </Wrapper>
    <TestElement>FlexItem 4</TestElement>
  </Flex.Container>
)
Suggest an edit