FlexLayout.js

// Simple Flexbox Layout for Styled Components

import React from "react";
import styled from "styled-components";

const ColorContainer = styled.div`
  background-color: ${({ bg }) => (bg ? bg : "inherit")};
`;

export const Main = styled(ColorContainer)`
  width: 100vw;
  height: 100vh;
`;

export const Split = styled(ColorContainer)`
  display: flex;
  height: 100%;
  width: 100%;

  justify-content: ${({ justify }) => (justify ? justify : "flex-start")};
  flex-direction: ${({ direction }) => (direction ? direction : "row")};
  align-items: ${({ items }) => (items ? items : "stretch")};
  align-content: ${({ content }) => (content ? content : "flex-start")};
`;

export const Child = styled(ColorContainer)`
  box-sizing: border-box;
  flex-grow: ${({ fill }) => (fill ? "1" : "0")};

  align-self: ${({ self }) => (self ? self : "stretch")};
  flex-basis: ${({ basis }) => (basis ? basis : "content")};

  padding: ${({ padding }) => (padding ? padding : "inherit")};
`;