反應：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。 此外，您可以通過'訂購'來控制組件的訂單。