React：使用内联样式和 React 路由的 Flexbox答案

【问题标题】：React: Flexbox using inline styles with react routerReact：使用内联样式和 React 路由的 Flexbox
【发布时间】：2016-11-27 05:21:34
【问题描述】：

我正在使用反应路由器导航到侧边栏应用程序中的不同路由。我正在使用内联样式对所有设计做出反应。此外，我正在使用 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>
    );
}

提前谢谢你！

【问题讨论】：

标签： css reactjs flexbox react-router inline-styles

【解决方案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'控制组件的顺序

【讨论】：

如果您的主要内容很小（比如 200 像素），这将不起作用。然后页脚向上而不是粘在底部。