constant.ts

export const VERTICAL_MARGIN = 16;

FlexibleBoxLayout.tsx

import { css } from 'glamor';
import * as React from 'react';

type Direction = 'row' | 'row-reverse' | 'column' | 'column-reverse';
type Wrap = 'nowrap' | 'wrap' | 'wrap-reverse';
type JustifyContent = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around';
type AlignItems = 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';
type AlignContent = 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'space-between' | 'space-around';
type Length = number | string;

interface Props {
  direction?: Direction;
  wrap?: Wrap;
  justifyContent?: JustifyContent;
  alignItems?: AlignItems;
  alignContent?: AlignContent;
  className?: string;
  children?: React.ReactElement<ItemProps>[] | React.ReactElement<ItemProps>;
}

interface ItemProps {
  order?: number;
  grow?: number;
  shrink?: number;
  basis?: Length;
  alignSelf?: AlignItems;
  width?: Length;
  height?: Length;
  className?: string;
  children?: React.ReactNode;
}

const FlexibleBoxLayout = (props: Props) => {
  const items = ([] as React.ReactElement<ItemProps>[]).concat(props.children || []);
  const style = css({
    display: 'flex',
    flexDirection: props.direction,
    flexWrap: props.wrap,
    justifyContent: props.justifyContent,
    alignItems: props.alignItems,
    alignContent: props.alignContent,
  });

  return <div className={`${style} ${props.className}`}>{items}</div>;
};

export const FlexibleBoxLayoutItem = (props: ItemProps) => {
  const style = css({
    order: props.order,
    flexGrow: props.grow,
    flexShrink: props.shrink,
    flexBasis: props.basis,
    alignSelf: props.alignSelf,
    width: props.width,
    height: props.height,
  });

  return <div className={`${style} ${props.className}`}>{props.children}</div>;
};

export default FlexibleBoxLayout;

index.ts

export { default as FlexibleBoxLayout, FlexibleBoxLayoutItem } from './FlexibleBoxLayout';