FlexBox - 特定のレイアウトを作成

Question

FlexBoxで新しくなりました。私はちょっと混乱します。あなたは私がそのレイアウトを作成するのに役立つてもらえ：

私が今持っているすべては、次のとおりです。

<div class="container" fxLayout="column" fxLayoutGap="20px"> 
 
    <h4>TITLE</h4> 
 
    <div> 
 
     <div fxFlex="25%">title</div> 
 
     <div>text</div> 
 
    </div> 
 
    <div> 
 
     <div fxFlex="25%">title</div> 
 
     <div>text</div> 
 
    </div> 
 
</div> 
 
<div class="container" fxLayout="column" fxLayoutGap="20px"> 
 
    <div> 
 
     <div fxFlex="25%">title</div> 
 
     <div>text</div> 
 
    </div> 
 
    <div> 
 
     <div fxFlex="25%">title</div> 
 
     <div>text</div> 
 
    </div> 
 
    <div>image</div> 
 
</div>

私は、この例ではフレックスに設定する方法を知りません。私はすべての "テキスト"を1行（列）にし、この2番目の部分だけをイメージにしたい。ここで

Answer 1

は、私が思い付くことができるものです。ご希望の場合は、下記のコメント欄にお知らせください。

#wrapper { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: nowrap; 
 
    justify-content: space-between; 
 
    align-items: flex-end; 
 
} 
 

 
.separate-columns { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.container { 
 
    flex-direction: column; 
 
    max-width: 50%; 
 
} 
 

 
th { 
 
    width: 250%; 
 
    text-align: left; 
 
} 
 

 
img { 
 
    height: 100%; 
 
}

<div id="wrapper"> 
 
    <div class="separate-columns"> 
 
    <div class="container"> 
 
     <h4>TITLE</h4> 
 
     <table> 
 
     <tr> 
 
      <th>Title</th> 
 
      <td>Text</td> 
 
     </tr> 
 
     <tr> 
 
      <th>Title</th> 
 
      <td>Text</td> 
 
     </tr> 
 
     <tr> 
 
      <th>Title</th> 
 
      <td>Text</td> 
 
     </tr> 
 
     </table> 
 
    </div> 
 
    <div class="container"> 
 
     <h4>TITLE2</h4> 
 
     <table> 
 
     <tr> 
 
      <th>Title</th> 
 
      <td>Text</td> 
 
     </tr> 
 
     <tr> 
 
      <th>Title</th> 
 
      <td>Text</td> 
 
     </tr> 
 
     <tr> 
 
      <th>Title</th> 
 
      <td>Text</td> 
 
     </tr> 
 
     </table> 
 
    </div> 
 
    </div> 
 
    <img src="https://www.tinymce.com/images/glyph-tinymce@2x.png" alt="Example"> 
 
</div>