反应：Flexbox使用内嵌样式与反应路由器

Question

我正在使用反应路由器导航到我的应用程序中的不同路线在侧边栏上。我正在使用内联式样对所有设计进行反应。而且，我正在使用flexbox来实现设计。我是新来的flex，并没有完全掌握造型的概念。 这基本上是我想要做什么：

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> 
    ); 
} 

预先感谢您！

Answer 1

我做了example关于你的问题

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') 
); 

的基本思想是用“柔性”的风格，以控制组分的比例。 例如，我的标题，文章和页脚的“flex”是1,6,1。因此高度的比例是1：6：1。 此外，您可以通过'订购'来控制组件的订单。