Reagieren: Flexbox mit Inline-Stilen mit Reagieren Router

Question

Ich benutze Reagieren Router, um zu verschiedenen Routen in meiner Anwendung in Sidebar navigieren. Ich verwende Inline-Styling, um auf alle Designs zu reagieren. Außerdem verwende ich flexbox, um Design zu erreichen. Ich bin neu im Flex und habe das Konzept für das Styling nicht komplett verstanden. Dies ist im Grunde, was ich machen möchte:

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

Vielen Dank im Voraus!

Answer 1

ich eine example in Bezug auf Ihre Frage gemacht

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

Die Grundidee ist in der Art verwenden „Flex“, um die Verhältnisse der Komponenten zu steuern. Zum Beispiel sind die "Flex" von meinem Header, Artikel, Fußzeile 1, 6, 1. So sind die Verhältnisse der Höhen 1: 6: 1. Außerdem können Sie die Bestellungen von Komponenten durch 'bestellen'