Skip to content
Home

Flex.Container

Info
Demos
Properties

Demos

No properties

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

Centers items vertically inside a horizontal container.

Tall
Short
Taller
Short
<Flex.Container 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 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>
  <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>
  <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 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 direction="vertical">
  <Card>Card contents</Card>
  <Card>Card contents</Card>
  <Card>Card contents</Card>
</Flex.Container>

Vertical line divider

FlexItem
FlexItem
FlexItem
<Flex.Container 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 divider="line-framed" gap="x-small">
    <TestElement>FlexItem</TestElement>
    <TestElement>FlexItem</TestElement>
  </Flex.Stack>
)
render(
  <Flex.Horizontal 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 direction="vertical">
    <TestElement>FlexItem 1</TestElement>
    <Wrapper>
      <TestElement>FlexItem 2</TestElement>
      <TestElement>FlexItem 3</TestElement>
    </Wrapper>
    <TestElement>FlexItem 4</TestElement>
  </Flex.Container>
)
Edit on GitHub