2つのコンポーネントを水平に表示する方法

Question

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { NavBar } from './NavBar.js'; 
import {Parent} from './Parent.js'; 

class ProfilePage extends React.Component { 
    render() { 
     return (
      <div style={{flexDirection:'row'}}> 
       <NavBar /> 
       <Parent /> 
      </div> 
     ); 
    } 
} 

ReactDOM.render(<ProfilePage />, document.getElementById('root')); 

NavBarとParentを水平に表示しようとしています。私はflexDirection:'row'で試してみましたが、うまくいきませんでした。誰かが私にそれを解決する助けてもいいですか？前もって感謝します。フレキシボックスで動作するように

Answer 1

あなたはあなたが1つのdiv に、これら二つの成分をラップし、そのDIVに表示フレックスを追加し、 フレックス方向に適用することができ、ディスプレイフレックス親

を必要とする：行を、親のdivに、それが動作するはずです flexboxを使いたくない場合は、displayを追加してください：インラインブロック すべてのラッパーコンポーネント用

Answer 2

何かそんな感じですか？ 私はflex & flex-direction: columnを使って、2つの部分を上下に重ねています。コンテンツは、それはあなたが `NavBar`と` Parent`のためのいくつかのコードを追加することができますflex: 1 1 auto

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 

 
.wrapper { 
 
    height: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
nav { 
 
    display: block; 
 
    width: 100%; 
 
    background-color: rgba(255, 0, 0, 0.2); 
 
} 
 

 
main { 
 
    flex: 1 1 auto; 
 
    background-color: rgba(255, 0, 0, 0.4); 
 
}

<div class="wrapper"> 
 
    <nav> 
 
    <ul> 
 
     <li>Lin 1</li> 
 
     <li>Link 2</li> 
 
     <li>Link 3</li> 
 
    </ul> 
 
    </nav> 
 
    <main> 
 
    content 
 
    </main> 
 
</div>