2017-02-13 10 views
0

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

フレックスボックスには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> 

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

+1

width:100%をdivに適用できますか? – Roberrrt

+0

は、textStyle propを使用して親に100%幅を追加しました。その後、インラインフレックスからフレックスに変更されました。あなたの助けをありがとう – LuckyLukas

答えて

0

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

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

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

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

0

トップ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> 
); 
} 
1

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>

+0

ありがとう!問題の組み合わせがありました。まず、インラインフレックスがコンテンツのサイズに崩壊していた(フレックスに変わった)と言ったように。さらに、親部門は100%幅ではありませんでした。私はCardHeaderのtextStyle propを使用し、幅を100%に設定してオーバーロードします。 – LuckyLukas

+0

どうやって動くの?あなたは質問の内容を含めるためにあなたの答えを少し編集しますか?答えとしてマークしますか?あるいは私はあなたのことに基づいてモーダルな答えを書いていますか? – LuckyLukas

+0

@ LuckyLukasまず、私の答えは主な問題を解決してから、ポイントを更新するのを見ていない、第2に、100%の幅を持たないどんな親も問題に言及されていないし、コンテンツプロパティ、..それで、私がすでに主な起源の質問に答えたときにあなたが自分の答えを投稿すべき理由はわかりません。 – LGSon

関連する問題