Playbook Design System

Default

Prop

orientation | Type: String | Values: row | column

import React from 'react'

import { Title, Flex, FlexItem } from 'playbook-ui'

const FlexDefault = (props) => {
  return (
    <>

      <Title
          size={4}
          text="Row"
      />
      <br />
      <div className="flex-doc-example">
        <Flex
            orientation="row"
        >
          <FlexItem>
            {'1'}
          </FlexItem>
          <FlexItem>
            {'2'}
          </FlexItem>
          <FlexItem>
            {'3'}
          </FlexItem>
          <FlexItem>
            {'4'}
          </FlexItem>
        </Flex>
      </div>
      <br />
      <Title
          size={4}
          text="Column"
      />
      <br />
      <div className="flex-doc-example">
        <Flex
            align="start"
            orientation="column"
        >
          <FlexItem>
            {'1'}
          </FlexItem>
          <FlexItem>
            {'2'}
          </FlexItem>
          <FlexItem>
            {'3'}
          </FlexItem>
          <FlexItem>
            {'4'}
          </FlexItem>
        </Flex>
      </div>
    </>
  )
}

export default FlexDefault

Inline

Prop

inline | Type: Boolean
By default this prop is false which sets the flex container to take up the full width of its parent container. When the prop is set to true the flex container sets its width to be the same size as the containing items.

import React from 'react'

import { Flex, FlexItem, Title } from 'playbook-ui'

const FlexInline = (props) => {
  return (
    <>
      <div className="flex-doc-example">
        <Title
            size={4}
            text="Row"
        />
        <br />
        <Flex
            className="bg_light"
            inline
        >
          <FlexItem>
            {'1'}
          </FlexItem>
          <FlexItem>
            {'2'}
          </FlexItem>
          <FlexItem>
            {'3'}
          </FlexItem>
          <FlexItem>
            {'4'}
          </FlexItem>
        </Flex>

        <br />
        <Title
            size={4}
            text="Column"
        />
        <br />
        <Flex
            className="bg_light"
            inline
            orientation="column"
        >
          <FlexItem>
            {'1'}
          </FlexItem>
          <FlexItem>
            {'2'}
          </FlexItem>
          <FlexItem>
            {'3'}
          </FlexItem>
          <FlexItem>
            {'4'}
          </FlexItem>
        </Flex>
      </div>
    </>
  )
}

export default FlexInline

Reverse

Prop

reverse | Type: Boolean
When set to true this prop will reverse the order of items in the flex container.

import React from 'react'

import { Flex, FlexItem, Title } from 'playbook-ui'

const FlexReverse = (props) => {
  return (
    <>
      <div className="flex-doc-example">
        <Title
            size={4}
            text="Row"
        />
        <br />
        <Flex
            className="bg_light"
            justify="start"
            orientation="row"
            reverse
        >
          <FlexItem>
            {'1'}
          </FlexItem>
          <FlexItem>
            {'2'}
          </FlexItem>
          <FlexItem>
            {'3'}
          </FlexItem>
          <FlexItem>
            {'4'}
          </FlexItem>
        </Flex>

        <br />
        <Title
            size={4}
            text="Column"
        />
        <br />
        <Flex
            align="start"
            className="bg_light"
            orientation="column"
            reverse
        >
          <FlexItem>
            {'1'}
          </FlexItem>
          <FlexItem>
            {'2'}
          </FlexItem>
          <FlexItem>
            {'3'}
          </FlexItem>
          <FlexItem>
            {'4'}
          </FlexItem>
        </Flex>
      </div>
    </>
  )
}

export default FlexReverse

Wrap

Prop

wrap | Type: Boolean
When set to true this prop will move the next item in flex container to a new line if there is no more room.

import React from 'react'

import { Body, Flex, FlexItem, Title } from 'playbook-ui'

const FlexWrap = (props) => {
  return (
    <>
      <div className="flex-doc-example">
        <Body
            text="Resize your browser"
        />
        <Title
            size={4}
            text="Wrap"
        />
        <br />
        <Flex
            className="bg_light"
            wrap
        >
          <FlexItem fixedSize="300px">
            {'1'}
          </FlexItem>
          <FlexItem fixedSize="300px">
            {'2'}
          </FlexItem>
          <FlexItem fixedSize="300px">
            {'3'}
          </FlexItem>
          <FlexItem fixedSize="300px">
            {'4'}
          </FlexItem>
          <FlexItem fixedSize="300px">
            {'5'}
          </FlexItem>
          <FlexItem fixedSize="300px">
            {'6'}
          </FlexItem>
          <FlexItem fixedSize="300px">
            {'7'}
          </FlexItem>
          <FlexItem fixedSize="300px">
            {'8'}
          </FlexItem>
          <FlexItem fixedSize="300px">
            {'9'}
          </FlexItem>
          <FlexItem fixedSize="300px">
            {'10'}
          </FlexItem>
        </Flex>

        <br />
        <Title
            size={4}
            text="No Wrap"
        />
        <br />
        <Flex className="bg_light">
          <FlexItem fixedSize="300px">
            {'1'}
          </FlexItem>
          <FlexItem fixedSize="300px">
            {'2'}
          </FlexItem>
          <FlexItem fixedSize="300px">
            {'3'}
          </FlexItem>
          <FlexItem fixedSize="300px">
            {'4'}
          </FlexItem>
          <FlexItem fixedSize="300px">
            {'5'}
          </FlexItem>
          <FlexItem fixedSize="300px">
            {'6'}
          </FlexItem>
          <FlexItem fixedSize="300px">
            {'7'}
          </FlexItem>
          <FlexItem fixedSize="300px">
            {'8'}
          </FlexItem>
          <FlexItem fixedSize="300px">
            {'9'}
          </FlexItem>
          <FlexItem fixedSize="300px">
            {'10'}
          </FlexItem>
        </Flex>
      </div>
    </>
  )
}

export default FlexWrap

Spacing

Prop

import React from 'react'

import { Flex, FlexItem, Title } from 'playbook-ui'

const FlexSpacing = (props) => {
  return (
    <>
      <div className="flex-doc-example">
        <Title
            size={4}
            text="None"
        />
        <br />
        <Flex
            className="bg_light"
            justify="none"
        >
          <FlexItem>
            {'1'}
          </FlexItem>
          <FlexItem>
            {'2'}
          </FlexItem>
          <FlexItem>
            {'3'}
          </FlexItem>
          <FlexItem>
            {'4'}
          </FlexItem>
        </Flex>

        <br />

        <Title
            size={4}
            text="Around"
        />
        <br />
        <Flex
            className="bg_light"
            justify="around"
        >
          <FlexItem>
            {'1'}
          </FlexItem>
          <FlexItem>
            {'2'}
          </FlexItem>
          <FlexItem>
            {'3'}
          </FlexItem>
          <FlexItem>
            {'4'}
          </FlexItem>
        </Flex>

        <br />

        <Title
            size={4}
            text="Between"
        />
        <br />
        <Flex
            className="bg_light"
            justify="between"
        >
          <FlexItem>
            {'1'}
          </FlexItem>
          <FlexItem>
            {'2'}
          </FlexItem>
          <FlexItem>
            {'3'}
          </FlexItem>
          <FlexItem>
            {'4'}
          </FlexItem>
        </Flex>

        <br />

        <Title
            size={4}
            text="Evenly"
        />
        <br />
        <Flex
            className="bg_light"
            justify="evenly"
        >
          <FlexItem>
            {'1'}
          </FlexItem>
          <FlexItem>
            {'2'}
          </FlexItem>
          <FlexItem>
            {'3'}
          </FlexItem>
          <FlexItem>
            {'4'}
          </FlexItem>
        </Flex>
      </div>
    </>
  )
}

export default FlexSpacing

Justify

Prop

import React from 'react'

import { Flex, FlexItem, Title } from 'playbook-ui'

const FlexJustify = (props) => {
  return (
    <>

      <Title
          size={4}
          text="Row"
      />
      <br />
      <div className="flex-doc-example">
        <Flex
            justify="start"
            orientation="row"
        >
          <FlexItem>
            {'1'}
          </FlexItem>
          <FlexItem>
            {'2'}
          </FlexItem>
          <FlexItem>
            {'3'}
          </FlexItem>
          <FlexItem>
            {'4'}
          </FlexItem>
        </Flex>
      </div>
      <br />
      <div className="flex-doc-example">
        <Flex
            justify="center"
            orientation="row"
        >
          <FlexItem>
            {'1'}
          </FlexItem>
          <FlexItem>
            {'2'}
          </FlexItem>
          <FlexItem>
            {'3'}
          </FlexItem>
          <FlexItem>
            {'4'}
          </FlexItem>
        </Flex>
      </div>

      <br />
      <div className="flex-doc-example">
        <Flex
            justify="end"
            orientation="row"
        >
          <FlexItem>
            {'1'}
          </FlexItem>
          <FlexItem>
            {'2'}
          </FlexItem>
          <FlexItem>
            {'3'}
          </FlexItem>
          <FlexItem>
            {'4'}
          </FlexItem>
        </Flex>
      </div>
      <br />

      <Title
          size={4}
          text="Column"
      />
      <br />
      <div className="flex-doc-example tall">
        <Flex
            align="start"
            className="bg_light tall"
            justify="start"
            orientation="column"
        >
          <FlexItem>
            {'1'}
          </FlexItem>
          <FlexItem>
            {'2'}
          </FlexItem>
          <FlexItem>
            {'3'}
          </FlexItem>
          <FlexItem>
            {'4'}
          </FlexItem>
        </Flex>
      </div>
      <br />
      <div className="flex-doc-example tall">
        <Flex
            align="start"
            className="bg_light tall"
            justify="center"
            orientation="column"
        >
          <FlexItem>
            {'1'}
          </FlexItem>
          <FlexItem>
            {'2'}
          </FlexItem>
          <FlexItem>
            {'3'}
          </FlexItem>
          <FlexItem>
            {'4'}
          </FlexItem>
        </Flex>
      </div>
      <br />
      <div className="flex-doc-example tall">
        <Flex
            align="start"
            className="bg_light tall"
            justify="end"
            orientation="column"
        >
          <FlexItem>
            {'1'}
          </FlexItem>
          <FlexItem>
            {'2'}
          </FlexItem>
          <FlexItem>
            {'3'}
          </FlexItem>
          <FlexItem>
            {'4'}
          </FlexItem>
        </Flex>
      </div>
    </>
  )
}

export default FlexJustify

Align

Prop

import React from 'react'

import { Flex, FlexItem, Title } from 'playbook-ui'

const FlexAlign = (props) => {
  return (
    <>

      <Title
          size={4}
          text="row"
      />
      <br />

      <div className="flex-doc-example ">
        <Flex
            align="start"
        >
          <FlexItem>
            {'1'}
          </FlexItem>
          <FlexItem>
            {'2'}
          </FlexItem>
          <FlexItem padding="xl">
            {'3'}
          </FlexItem>
          <FlexItem padding="md">
            {'4'}
          </FlexItem>
        </Flex>
      </div>

      <br />

      <div className="flex-doc-example ">
        <Flex
            align="center"
        >
          <FlexItem>
            {'1'}
          </FlexItem>
          <FlexItem>
            {'2'}
          </FlexItem>
          <FlexItem padding="xl">
            {'3'}
          </FlexItem>
          <FlexItem padding="md">
            {'4'}
          </FlexItem>
        </Flex>
      </div>

      <br />

      <div className="flex-doc-example ">
        <Flex
            align="end"
        >
          <FlexItem>
            {'1'}
          </FlexItem>
          <FlexItem>
            {'2'}
          </FlexItem>
          <FlexItem padding="xl">
            {'3'}
          </FlexItem>
          <FlexItem padding="md">
            {'4'}
          </FlexItem>
        </Flex>
      </div>

      <br />

      <div className="flex-doc-example ">
        <Flex
            align="stretch"
            orientation="row"
        >
          <FlexItem>
            {'1'}
          </FlexItem>
          <FlexItem>
            {'2'}
          </FlexItem>
          <FlexItem padding="xl">
            {'3'}
          </FlexItem>
          <FlexItem padding="md">
            {'4'}
          </FlexItem>
        </Flex>
      </div>

      <br />

      <Title
          size={4}
          text="Column"
      />
      <br />

      <div className="flex-doc-example ">
        <Flex
            align="start"
            orientation="column"
        >
          <FlexItem>
            {'1'}
          </FlexItem>
          <FlexItem>
            {'2'}
          </FlexItem>
          <FlexItem>
            {'3'}
          </FlexItem>
          <FlexItem>
            {'4'}
          </FlexItem>
        </Flex>
      </div>

      <br />

      <div className="flex-doc-example ">
        <Flex
            align="center"
            orientation="column"
        >
          <FlexItem>
            {'1'}
          </FlexItem>
          <FlexItem>
            {'2'}
          </FlexItem>
          <FlexItem>
            {'3'}
          </FlexItem>
          <FlexItem>
            {'4'}
          </FlexItem>
        </Flex>
      </div>

      <br />

      <div className="flex-doc-example ">
        <Flex
            align="end"
            orientation="column"
        >
          <FlexItem>
            {'1'}
          </FlexItem>
          <FlexItem>
            {'2'}
          </FlexItem>
          <FlexItem>
            {'3'}
          </FlexItem>
          <FlexItem>
            {'4'}
          </FlexItem>
        </Flex>
      </div>

      <br />

      <div className="flex-doc-example ">
        <Flex
            align="stretch"
            orientation="column"
        >
          <FlexItem>
            {'1'}
          </FlexItem>
          <FlexItem>
            {'2'}
          </FlexItem>
          <FlexItem>
            {'3'}
          </FlexItem>
          <FlexItem>
            {'4'}
          </FlexItem>
        </Flex>
      </div>

    </>
  )
}

export default FlexAlign

Gap

Prop

gap | row_gap | rowGap | column_gap | columnGap | Type: String | Values: xxs | xs | sm | md | lg | xl | none
Setting the gap prop sets the row_gap || rowGap and the column_gap || columnGap props to the same size and creates equal space within a flex container.
Setting the row_gap || rowGap prop creates space between rows in a flex container.
Setting the column_gap || columnGap prop creates space between columns in a flex container.

import React from 'react'

import { Flex, FlexItem } from 'playbook-ui'

const FlexGap = (props) => {
  const count = () => {
    const array = []
    for (let i = 0; i < 40; i++) {
      array.push(i)
    }
    return array
  }

  return (
    <>
      <div className="flex-doc-example">
        <Flex
            gap="xxs"
            wrap
        >
          {count().map((v, key) => (
            <FlexItem key={key}>
              {v}
            </FlexItem>
            ))}
        </Flex>
      </div>

      <br />

      <div className="flex-doc-example">
        <Flex
            columnGap="lg"
        >
          <FlexItem>
            {'1'}
          </FlexItem>
          <FlexItem>
            {'2'}
          </FlexItem>
          <FlexItem>
            {'3'}
          </FlexItem>
          <FlexItem>
            {'4'}
          </FlexItem>
        </Flex>
      </div>
      <br />
      <div className="flex-doc-example">
        <Flex
            orientation="column"
            rowGap="xl"
        >
          <FlexItem>
            {'1'}
          </FlexItem>
          <FlexItem>
            {'2'}
          </FlexItem>
          <FlexItem>
            {'3'}
          </FlexItem>
          <FlexItem>
            {'4'}
          </FlexItem>
        </Flex>
      </div>
    </>
  )
}

export default FlexGap

Flex Item

Props

display_flex | Type: Boolean
flex | Type: String | Values: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
fixed_size | Type: String | Values: Any CSS px or % value
grow | Type: Boolean
shrink | Type: Boolean
order | Type: String | Values: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | first
Flex is a short hand to set the flex item to take up (x) amount of available space
Setting Flex to 1 is equal to setting the grow & shrink prop to true
Setting Flex to 0 is equal to setting the grow & shrink prop to false
If grow & shrink are true, grow will take precedence an the flex item will take up as much space as possible, then if other elements are added shrink would allow other items to squish inside the flex container
display_flex will either be true or false. If true, then the class will be applied to the kit

import React from 'react'

import { Flex, FlexItem, Title } from 'playbook-ui'

const FlexItemExample = (props) => {
  return (
    <>
      <Title
          size={4}
          text="Display Flex"
      />
      <br />
      <div className="flex-doc-example">
        <FlexItem
            displayFlex
            gap="xs"
        >
          <FlexItem>
            {'We'}
          </FlexItem>
          <FlexItem>
            {'Are'}
          </FlexItem>
          <FlexItem>
            {'Being'}
          </FlexItem>
          <FlexItem>
            {'Flexed'}
          </FlexItem>
        </FlexItem>
      </div>

      <br />
      <Title
          size={4}
          text="Grow"
      />
      <br />
      <div className="flex-doc-example">
        <Flex
            gap="xs"
        >
          <FlexItem grow>
            {'I\'m growing'}
          </FlexItem>
          <FlexItem>
            {'2'}
          </FlexItem>
          <FlexItem>
            {'3'}
          </FlexItem>
          <FlexItem>
            {'4'}
          </FlexItem>
        </Flex>
      </div>

      <br />
      <Title
          size={4}
          text="Shrink"
      />
      <br />

      <div className="flex-doc-example">
        <Flex
            gap="xs"
        >
          <FlexItem>
            {'I\'m shrinking'}
          </FlexItem>
          <FlexItem flex={1}>
            {'2'}
          </FlexItem>
          <FlexItem flex={1}>
            {'3'}
          </FlexItem>
          <FlexItem flex={1}>
            {'4'}
          </FlexItem>
        </Flex>
      </div>
      <br />
      <Title
          size={4}
          text="Fixed Size"
      />
      <br />
      <div className="flex-doc-example">
        <Flex
            gap="xs"
        >
          <FlexItem fixedSize="250px">
            {'I\'m 250px'}
          </FlexItem>
          <FlexItem flex={1}>
            {'2'}
          </FlexItem>
          <FlexItem flex={1}>
            {'3'}
          </FlexItem>
          <FlexItem flex={1}>
            {'4'}
          </FlexItem>
        </Flex>
      </div>

      <br />
      <Title
          size={4}
          text="Flex"
      />
      <br />
      <div className="flex-doc-example">
        <Flex
            gap="xs"
        >
          <FlexItem flex={1}>
            {'1'}
          </FlexItem>
          <FlexItem flex={3}>
            {'2'}
          </FlexItem>
          <FlexItem flex={1}>
            {'3'}
          </FlexItem>
          <FlexItem flex={2}>
            {'4'}
          </FlexItem>
        </Flex>
      </div>

      <br />
      <Title
          size={4}
          text="Order"
      />
      <br />
      <div className="flex-doc-example">
        <Flex
            gap="xs"
        >
          <FlexItem order={4}>
            {'1'}
          </FlexItem>
          <FlexItem order={2}>
            {'2'}
          </FlexItem>
          <FlexItem order={1}>
            {'3'}
          </FlexItem>
          <FlexItem order={3}>
            {'4'}
          </FlexItem>
        </Flex>
      </div>
    </>
  )
}

export default FlexItemExample

Flex Item - Align Self

Prop

align_self | Type: String | Values: start | end | center | stretch
Align-self aligns the Flex Item on the cross axis. This prop may also be applied to the Flex kit and will act the same way.

import React from 'react'

import { Flex, FlexItem, Title } from 'playbook-ui'

const FlexItemAlignSelf = (props) => {
  return (
    <>
      <Title
          size={4}
          text="Row"
      />

      <br />

      <div className="flex-doc-example ">
        <Flex
        >
          <FlexItem alignSelf="start">
            {'1'}
          </FlexItem>
          <FlexItem padding="md">
            {'2'}
          </FlexItem>
          <FlexItem padding="md">
            {'3'}
          </FlexItem>
          <FlexItem padding="md">
            {'4'}
          </FlexItem>
        </Flex>
      </div>

      <br />

      <div className="flex-doc-example ">
        <Flex
        >
          <FlexItem alignSelf="end">
            {'1'}
          </FlexItem>
          <FlexItem padding="md">
            {'2'}
          </FlexItem>
          <FlexItem padding="md">
            {'3'}
          </FlexItem>
          <FlexItem padding="md">
            {'4'}
          </FlexItem>
        </Flex>
      </div>

      <br />

      <div className="flex-doc-example ">
        <Flex
        >
          <FlexItem alignSelf="center">
            {'1'}
          </FlexItem>
          <FlexItem padding="md">
            {'2'}
          </FlexItem>
          <FlexItem padding="md">
            {'3'}
          </FlexItem>
          <FlexItem padding="md">
            {'4'}
          </FlexItem>
        </Flex>
      </div>

      <br />

      <div className="flex-doc-example ">
        <Flex
        >
          <FlexItem alignSelf="stretch">
            {'1'}
          </FlexItem>
          <FlexItem padding="md">
            {'2'}
          </FlexItem>
          <FlexItem padding="md">
            {'3'}
          </FlexItem>
          <FlexItem padding="md">
            {'4'}
          </FlexItem>
        </Flex>
      </div>

      <br />
      <br />

      <Title
          size={4}
          text="Column"
      />

      <br />

      <div className="flex-doc-example ">
        <Flex
            orientation="column"
        >
          <FlexItem
              alignSelf="start"
              padding="sm"
          >
            {'1'}
          </FlexItem>
          <FlexItem padding="sm">
            {'2'}
          </FlexItem>
          <FlexItem padding="sm">
            {'3'}
          </FlexItem>
          <FlexItem padding="sm">
            {'4'}
          </FlexItem>
        </Flex>
      </div>

      <br />

      <div className="flex-doc-example ">
        <Flex
            orientation="column"
        >
          <FlexItem
              alignSelf="end"
              padding="sm"
          >
            {'1'}
          </FlexItem>
          <FlexItem padding="sm">
            {'2'}
          </FlexItem>
          <FlexItem padding="sm">
            {'3'}
          </FlexItem>
          <FlexItem padding="sm">
            {'4'}
          </FlexItem>
        </Flex>
      </div>

      <br />

      <div className="flex-doc-example ">
        <Flex
            orientation="column"
        >
          <FlexItem
              alignSelf="center"
              padding="sm"
          >
            {'1'}
          </FlexItem>
          <FlexItem padding="sm">
            {'2'}
          </FlexItem>
          <FlexItem padding="sm">
            {'3'}
          </FlexItem>
          <FlexItem padding="sm">
            {'4'}
          </FlexItem>
        </Flex>
      </div>

      <br />

      <div className="flex-doc-example ">
        <Flex
            orientation="column"
        >
          <FlexItem
              alignSelf="stretch"
              padding="sm"
          >
            {'1'}
          </FlexItem>
          <FlexItem padding="sm">
            {'2'}
          </FlexItem>
          <FlexItem padding="sm">
            {'3'}
          </FlexItem>
          <FlexItem padding="sm">
            {'4'}
          </FlexItem>
        </Flex>
      </div>

    </>
  )
}

export default FlexItemAlignSelf

Flex

Prop

Prop

Prop

Prop

Prop

Prop

Prop

Prop

Props

Prop

Available Props

Contribute to Playbook

Power

Connect