Based on https://gist.github.com/jorilallo/a9e60b3ce3f7373e3c65a50d65e8e1e8 with propTypes instead of Flow, and using styled-by

flexbox.js

import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import styledBy from 'styled-by'

const GlobalCssValues = ['initial', 'inherit', 'unset']
const WrapValue = ['nowrap', 'wrap', 'wrap-reverse', ...GlobalCssValues]
const JustifyValue = [
  'center',
  'start',
  'end',
  'flex-start',
  'flex-end',
  'left',
  'right',
  'baseline',
  'first baseline',
  'last baseline',
  'space-between',
  'space-around',
  'space-evenly',
  'stretch',
  'safe center',
  'unsafe center',
  ...GlobalCssValues
]

const AlignValue = [
  'normal',
  'stretch',
  'center',
  'start',
  'end',
  'flex-start',
  'flex-end',
  'self-start',
  'self-end',
  'left',
  'right',
  'first baseline',
  'last baseline',
  'safe center',
  'unsafe center',
  ...GlobalCssValues
]

const propTypes = {
  auto: PropTypes.bool,
  column: PropTypes.bool,
  reverse: PropTypes.bool,
  justify: PropTypes.oneOf(JustifyValue),
  align: PropTypes.oneOf(AlignValue),
  wrap: PropTypes.oneOf(WrapValue),
  className: PropTypes.string,
};


const FlexBox = styled.div`
  display: flex;

  ${styledBy({
    auto: `flex: 1 1 auto;`,
    justify: ({ justify }) => `justify-content: ${justify};`,
    align: ({ align }) => `align-items: ${align};`,
    wrap: ({ wrap }) => `flex-wrap: ${wrap};`,
    column: ({ column, reverse }) => {
      const postFix = reverse ? '-reverse' : '';
      const direction = column ? `column${postFix}` : `row${postFix}`;
      return `flex-direction: ${direction};`
    }
  })}
`

FlexBox.propTypes = PropTypes

export default FlexBox