は、flexboxとmaterial uiで動作するjustifyContentを取得できません。

Question

jsxをmaterial-uiカードコンポーネントのtitle propに返そうとしています。私は2つのボックスをそれらの間にスペースを入れて表示したいと思います。ヘッダの左側と右側にそれぞれ1つずつ設けられている。

フレックスボックスにはdivのインラインが予想通り表示されていますが、水平軸を横切って移動することはできません。アトムのように見えるものの写真が添付されています。 screenshot

renderCardTitle() { 
    return (
     <div style={{ display: 'inline-flex', justifyContent: 'space-between' }}> 
      <div> 
       first box 
      </div> 
      <div style={{ alignSelf: 'flex-end' }}> 
       second box 
      </div> 
     </div> 
    ); 
    } 

問題のカードコンポーネントのコードは次のとおりです。

<Card style={styles.cardStyles}> 
     <CardHeader 
     title={this.renderCardTitle()} 
     actAsExpander 
     showExpandableButton 
     /> 
     <CardText expandable> 
     details about the quiz 
     </CardText> 
    </Card> 

任意のヘルプははるかに高く評価されます！

Answer 1

を与えられた答えのおかげで2倍であった問題を見つけるのを助けた：

1）親divが幅100％に設定されていない、カードタイトルのテキストコンポーネントのインラインスタイルを上書きするカードヘッダ成分から、回答の一つで述べたような材料UIドキュメントhttp://www.material-ui.com/#/components/card

 <CardHeader 
     title={this.renderCardTitle()} 
     actAsExpander 
     showExpandableButton 
     textStyle={{ width: '100%' }} 
     /> 

2）に記述のように、またサイズにインラインフレックス潰れるように、フレックス代わりにインラインフレックスを使用する必要がそれに含まれるコンテンツ

Answer 2

トップdivの幅になる場合があります。カードヘッダコンテナ全体にまたがっていません。 width:'100%'を設定してみてください。

renderCardTitle() { 
return (
    <div style={{ width:'100%' display: 'inline-flex', justifyContent: 'space-between' }}> 
     <div> 
      first box 
     </div> 
     <div style={{ alignSelf: 'flex-end' }}> 
      second box 
     </div> 
    </div> 
); 
} 

Answer 3

display: inline-flexは、したがってjustify-contentが動作しません、コンテンツのサイズに親を折りたたむので、display: flex代わり

body > div { 
 
    padding: 5px; 
 
} 
 
div { 
 
    border: 1px solid gray; 
 
}

<div style="display: flex; justify-content: space-between"> 
 
    <div> 
 
    first box 
 
    </div> 
 
    <div> 
 
    second box 
 
    </div> 
 
</div>

を使用するか、親に比べて広い幅を与えます2ボックスの内容

body > div { 
 
    width: 50%; 
 
    padding: 5px; 
 
} 
 
div { 
 
    border: 1px solid gray; 
 
}

<div style="display: inline-flex; justify-content: space-between"> 
 
    <div> 
 
    first box 
 
    </div> 
 
    <div> 
 
    second box 
 
    </div> 
 
</div>

または2に余白を追加：NDボックス

body > div { 
 
    padding: 5px; 
 
} 
 
div { 
 
    border: 1px solid gray; 
 
}

<div style="display: inline-flex;"> 
 
    <div> 
 
    first box 
 
    </div> 
 
    <div style="margin-left: 20px;"> 
 
    second box 
 
    </div> 
 
</div>