同じフレックスボックスコンテナに水平方向と垂直方向にアイテムを積み重ねる際に問題が発生しました

Question

私はブートストラップフレックスボックスコンテナを持っていますが、左側のイメージを水平にしますが、タイトル、説明、それの権利。しかし、私がアライメントを変更しようとすると、私が見つけた唯一の選択肢は、すべてのコンテンツボックスを水平または垂直に積み重ねることです。私はフロートを避けたいですが、イメージを水平に、3つの異なるテキストセクションを垂直に並べることは可能ですか？

<div class="container"> 
     <div class="d-flex justify-content-end flex-row my-flex-container "> 
      <div class="mr-auto p-2 my-flex-item"><img src="./images/webimage.png" alt="Mountain View"></div>     
      <div class="p-2 my-flex-item hello">Quoriron</div> 
      <div class="p-2 my-flex-item hello">Quoriron is a Quora clone, made with React/Redux and using Ruby-on-Rails as an APIQuoriron is a Quora clone, made with React/Redux and using Ruby-on-Rails as an APIQuoriron is a Quora clone, made with React/Redux and using Ruby-on-Rails as an API</div>    
      <div class="p-2 my-flex-item hello">Powered by: React, Rails</div> 
     </div> 
    </div> 

Answer 1

あなたは、流れを包むコンテナに高さを与える、100％に画像フレックス項目に高さを設定する、またはテキスト項目のラッパーを追加フレックス列を使用する必要がありますどちらか。

カラムの方向では、まだテキストが折り返している可能性があります。したがって、動的な応答ソリューションの場合は、追加のラッパーを使用することをおすすめします。

注意、あなたはマークアップができない場合はもちろんのfloat缶は、これを行う、私は自分自身を言ったように

注2、及びをしなかった、それに応じてブートストラップクラスを調整する必要があります変更する。

スタックはとても基本的に私はこの効果を達成するために必要がある場合

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
    <div class="container"> 
 
     <div class="d-flex justify-content-end flex-row my-flex-container "> 
 
      <div class="mr-auto p-2 my-flex-item"><img src="./images/webimage.png" alt="Mountain View"></div>     
 
      <div class="p-2 my-flex-item hello"> 
 
       <div>Quoriron</div> 
 
       <div>Quoriron is a Quora clone, made with React/Redux and using Ruby-on-Rails as an APIQuoriron is a Quora clone, made with React/Redux and using Ruby-on-Rails as an APIQuoriron is a Quora clone, made with React/Redux and using Ruby-on-Rails as an API</div>    
 
       <div>Powered by: React, Rails</div> 
 
      </div> 
 
     </div> 
 
    </div>