Add props align

nextjs/components/atoms/RootContainer.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from "prop-types";
 import { withStyles } from '@material-ui/core/styles';
 
@@ -6,19 +6,39 @@ const styles = theme => ({
   root: {
     display: 'flex',
     flexDirection: 'column',
-    justifyContent: 'flex-start',
     height: '100%',
   },
+  start: {
+    alignItems: 'flex-start',
+  },
+  center: {
+    alignItems: 'center',
+  },
+  end: {
+    alignItems: 'flex-end',
+  },
 });
 
 class RootContainer extends React.Component {
 
   render() {
-    const { classes, children } = this.props;
+    const { classes, children, align } = this.props;
+
     return (
-      <section className={classes.root}>
-          {children}
-      </section>
+      <Fragment>
+        {(() => {
+        switch(align) {
+          case 'start':
+            return <section className={classes.root + ' ' + classes.start}>{children}</section>;
+          case 'center':
+            return <section className={classes.root + ' ' + classes.center}>{children}</section>;
+          case 'end':
+            return <section className={classes.root + ' ' + classes.end}>{children}</section>;
+          default:
+            return <section className={classes.root}>{children}</section>;
+        }
+        })()}
+      </Fragment>
     );
   }
 }