title: React: Flexbox using inline styles with react router
body: <p>I am using react router to navigate to different routes in my application on sidebar. I am using inline styling for react for all the designs. Moreover, I am using flexbox to achieve design. I am new to flex and haven't completely grasped the concept for the styling. 
  This is basically what I want to make:
  <a href="https://i.stack.imgur.com/nXkEW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nXkEW.png" alt="enter image description here"></a></p>
  
  <p><strong>app.jsx</strong></p>
  
  <pre><code>render() {
      const styles = {
          container: {
              display: 'flex',
              height: '100%'
          },
          sidebar: {
              container: {
                  backgroundColor: 'blue'
              }
          },
          header : {
              width: '100%'
          }
      };
      return (
          &lt;div style={styles.container}&gt;
              &lt;Sidebar style={styles.sidebar} links={sidebarLinks} /&gt;
              &lt;Header /&gt;
              {this.props.children}
              &lt;Footer /&gt;
          &lt;/div&gt;
      );
  }
  </code></pre>
  
  <p>Thank you in advance!</p>