React: Flexbox using inline styles with react router

Question

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:

app.jsx

render() {
    const styles = {
        container: {
            display: 'flex',
            height: '100%'
        },
        sidebar: {
            container: {
                backgroundColor: 'blue'
            }
        },
        header : {
            width: '100%'
        }
    };
    return (
        <div style={styles.container}>
            <Sidebar style={styles.sidebar} links={sidebarLinks} />
            <Header />
            {this.props.children}
            <Footer />
        </div>
    );
}

Thank you in advance!

Solution

I made an example regarding your question

var Hello = React.createClass({
  render: function() {
    const styles = {
           main: {
             margin: 0,
             padding: 0,
             display: 'flex',
             height: '600',
             flexDirection: 'column'
          },
          article: {
             margin: '4px',
             padding: '5px',
             borderRadius: '7pt',
             background: 'red',
             flex: 6,
             order: 2,
             alignItems: 'stretch'
          },
          header: {
             margin: '4px',
             padding: '5px',
             borderRadius: '7pt',
             background: 'green',
             flex: 1,
             order: 1
          },
          footer: {
             margin: '4px',
             padding: '5px',
             borderRadius: '7pt',
             background: 'blue',
             flex: 1,
             order: 3
          }
        }
    return (
        <div style={styles.main}>
          <article style={styles.article}>
            <p>this is your content</p>
          </article>
          <header style={styles.header}>header</header>
          <footer style={styles.footer}>footer</footer>
        </div>
    )
  }
});

ReactDOM.render(
  <Hello />,
  document.getElementById('container')
);

The basic idea is use "flex" in style to control the ratios of components. For instance, the "flex" of my header, article, footer are 1, 6, 1. So the ratios of heights are 1:6:1. Besides, you can control the orders of components by 'order'

Comments

[Pic Mickael]

This is not working if you have a small main content (say 200px). Then the footer goes up instead of sticking to the bottom.