From 383a3f90a527f33cf1fa14ee3bb1bfe297da0d73 Mon Sep 17 00:00:00 2001
From: Jinksi <ericjinks@gmail.com>
Date: Wed, 29 Mar 2017 12:01:55 +1000
Subject: [PATCH] Add <Flex />

---
 src/components/common.js | 32 ++++++++++++++++++++++++++------
 1 file changed, 26 insertions(+), 6 deletions(-)

diff --git a/src/components/common.js b/src/components/common.js
index a03908b..cdecb27 100644
--- a/src/components/common.js
+++ b/src/components/common.js
@@ -1,11 +1,5 @@
 import styled from 'styled-components'
 
-export const Container = styled.div`
-  margin: 0 auto;
-  max-width: 1111px;
-  width: 90vw;
-`
-
 export const Section = styled.section`
   width: 100%;
   padding: ${props => {
@@ -14,3 +8,29 @@ export const Section = styled.section`
     return '5rem 0'
   }};
 `
+
+export const Container = styled.div`
+  margin: 0 auto;
+  max-width: 1111px;
+  width: 90vw;
+`
+
+export const Flex = styled.div`
+  display: flex;
+  flex-direction: ${props => props.column ? 'column' : 'row'};
+  justify-content: ${props => {
+    if (props.justifyCenter) return 'center'
+    if (props.justifyEnd) return 'flex-end'
+    if (props.justifyBetween) return 'space-between'
+    if (props.justifyAround) return 'space-around'
+    return 'flex-start'
+  }};
+  align-items: ${props => {
+    if (props.alignStart) return 'flex-start'
+    if (props.alignEnd) return 'flex-end'
+    if (props.alignStretch) return 'stretch'
+    return 'center'
+  }};
+  height: ${props => props.fill ? '100%' : 'auto'};
+  width: ${props => props.fill ? '100%' : 'auto'};
+`