適切に配置するネストされたフレキシボックスは

Question

が、私はこのようになりますflexboxesと構造を達成しようとしていますdivタグ：

をしかし、今私はこのようなルックスを達成しているかのように：

つまり、ネストされたdivのテキストを左揃えの画像の下に表示することはできません。

はここに関連するHTMLです：

<div class='page'> 
       /*Some more divs*/ 


      <div class='section feature-1 ' > 
       <img src='image1.jpg' class='divToShowHide' height="30%" 
       width="50%"/> 

       <div class='section feature-1 feature-1-content'> 
       <h2>TEXT HERE ! 
       </h2></div> 
      </div> 


      /*More similar divs here*/ 

    </div> 

そして、ここでは、関連するCSSです：私は画像と機能-1のdivのテキストを取得できますか

.page { 
    display: flex; 
    flex-wrap: wrap; 
} 


.section { 
    width: 100%; 
    height: 300px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 
.feature-1 { 
    display: flex; 
    flex-direction: row; 
    background-color: #F5CF8E; 
    align-items: flex-start; 
    justify-content: flex-start; 


} 
.feature-1-content{ 
    align-items: center; 

} 

.feature-1 img{ 

    padding: 5px; 
    border-radius: 50%; 
} 

私が望むように配置しますそれらへ ？

Answer 1

flex-direction: rowを.feature-1からflex-direction: columnに変更すると、縦に積み重ねられます。

Answer 2

ネストしたフレックスコンテナにflex-wrap: wrapも追加する必要があります。

image要素とtext要素の親がwrapに設定されていない場合、子要素が1つの行に表示されます。