css - react : Flexbox using inline styles with react router

Question

我正在使用 React 路由器在侧边栏上导航到我的应用程序中的不同路由。我正在使用内联样式对所有设计使用react。而且，我正在使用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”来控制组件的比例。 例如，我的页眉、文章、页脚的“flex”是1、6、1。所以高度的比例是1:6:1。 此外，您可以通过'order'控制组件的顺序