Flex

import { Flex } from '@elemental-ui-alpha/flex';

Parent

Align

The align property defines the alignment of items on the vertical axis:

• center
• end
• start
• stretch (default)

<Flex direction="horizontal" align="center">
  <Box background="shade" width={50} height={50} />
  <Box background="dim" width={50} height={150} />
  <Box background="shade" width={50} height={100} />
</Flex>

Justify

The justify property defines how the browser distributes space between and around content items along the horizontal axis:

• around
• between
• center
• end
• even
• start (default)
• stretch

<Flex direction="horizontal" justify="between">
  <Box background="shade" width={50} height={50} />
  <Box background="dim" width={50} height={50} />
  <Box background="shade" width={50} height={50} />
</Flex>

Direction

The direction property defines the main axis, or how the children are placed:

• column children are placed along the vertical axis
• row children are placed along the horizontal axis (default)

<Flex direction="vertical">
  <Box background="shade" width={50} height={50} />
  <Box background="dim" width={50} height={50} />
  <Box background="shade" width={50} height={50} />
</Flex>

Child

The Flex component also accepts "flex-child" properties.

Basis

The basis property sets the initial size of a flex item.

<Flex direction="horizontal">
  <Flex basis={300}>
    <Box background="shade" height={50} />
  </Flex>
  <Flex basis={300}>
    <Box background="dim" height={50} />
  </Flex>
  <Flex basis={300}>
    <Box background="shade" height={50} />
  </Flex>
</Flex>

Grow

The grow property sets the "flex grow factor" of an item. It specifies how much of the remaining space in the container should be assigned to the item.

<Flex direction="horizontal">
  <Flex grow={1}>
    <Box background="shade" height={50} />
  </Flex>
  <Flex grow={10}>
    <Box background="dim" height={50} />
  </Flex>
  <Flex grow={1}>
    <Box background="shade" height={50} />
  </Flex>
</Flex>

Shrink

The shrink property sets the "flex shrink factor" of an item. If the size of all items is larger than the container, items shrink to fit according to this property.

<Flex direction="horizontal">
  <Flex grow={1} shrink={2}>
    <Box background="shade" height={50} />
  </Flex>
  <Flex grow={1} shrink={0}>
    <Box background="dim" height={50} />
  </Flex>
  <Flex grow={1} shrink={1}>
    <Box background="shade" height={50} />
  </Flex>
</Flex>

Shorthand

Targets the flex CSS property, which sets how a flex item will grow or shrink to fit the space available in its flex container.

<Flex direction="horizontal">
  <Flex shorthand="2 1 0">
    <Box background="shade" height={50} />
  </Flex>
  <Flex shorthand="1 1 0">
    <Box background="dim" height={50} />
  </Flex>
  <Flex shorthand="1 1 0">
    <Box background="shade" height={50} />
  </Flex>
</Flex>