フレックスコンテナ内のブロック要素が予期したとおりに動作しない

Question

予期せぬ動作であることを理解するには何か助けが必要です。

h2が表示プロパティをブロックするように設定しても、h2がインラインのままになるのはなぜですか？ div要素の上にタイトルとして100％幅があることが期待されました。

section{ 
 
     border: 1px solid red; 
 
     display: flex; 
 
     flex-direction: row; 
 
     flex-wrap: nowrap; 
 
     justify-content: space-around; 
 
     align-items: stretch; 
 
    } 
 

 
h2 { 
 
    display: block; 
 
    border: 1px solid red; 
 
}

<section> 
 
       <h2>main title</h2> 
 
     <div> 
 
      <h3>title</h3> 
 
      <ul> 
 
      <li>element 1</li> 
 
      <li>element 2</li> 
 
      <li>element 3</li> 
 
      <li>element 4</li> 
 
      <li>element 5</li> 
 
      </ul> 
 
     </div> 
 
     <div> 
 
      <h3>title</h3> 
 
      <ul> 
 
      <li>element 1</li> 
 
      <li>element 2</li> 
 
      <li>element 3</li> 
 
      <li>element 4</li> 
 
      <li>element 5</li> 
 
      </ul> 
 
     </div> 
 
     <div> 
 
      <h3>title</h3> 
 
      <ul> 
 
      <li>element 1</li> 
 
      <li>element 2</li> 
 
      <li>element 3</li> 
 
      <li>element 4</li> 
 
      <li>element 5</li> 
 
      </ul> 
 
     </div> 
 
</section>

Answer 1

これは親のすべてのフレックス子供が横一列のセル/列であることを意味nowrapにフレックスrow設定されているため。

あなたはh2にwidth: 100%またはflex-basis: 100%を使用する必要があるともsectionにflex-wrap: wrapを追加したり、あなただけ... section上

section { 
 
     border: 1px solid red; 
 
     display: flex; 
 
     flex-direction: row; 
 
     flex-wrap: wrap; 
 
     justify-content: space-around; 
 
     align-items: stretch; 
 
    } 
 

 
h2 { 
 
    display: block; 
 
    border: 1px solid red; 
 
    width: 100%; 
 
}

<section> 
 
       <h2>main title</h2> 
 
     <div> 
 
      <h3>title</h3> 
 
      <ul> 
 
      <li>element 1</li> 
 
      <li>element 2</li> 
 
      <li>element 3</li> 
 
      <li>element 4</li> 
 
      <li>element 5</li> 
 
      </ul> 
 
     </div> 
 
     <div> 
 
      <h3>title</h3> 
 
      <ul> 
 
      <li>element 1</li> 
 
      <li>element 2</li> 
 
      <li>element 3</li> 
 
      <li>element 4</li> 
 
      <li>element 5</li> 
 
      </ul> 
 
     </div> 
 
     <div> 
 
      <h3>title</h3> 
 
      <ul> 
 
      <li>element 1</li> 
 
      <li>element 2</li> 
 
      <li>element 3</li> 
 
      <li>element 4</li> 
 
      <li>element 5</li> 
 
      </ul> 
 
     </div> 
 
</section>

または削除をh2を移動することができますどちらかflexプロパティをsectionから削除し、3つの列divを新しい要素にラップし、そこにflex要素を適用します。説明のための

.flex { 
 
    border: 1px solid red; 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: nowrap; 
 
    justify-content: space-around; 
 
    align-items: stretch; 
 
} 
 

 
h2 { 
 
    display: block; 
 
    border: 1px solid red; 
 
}

<section> 
 
    <h2>main title</h2> 
 
    <div class="flex"> 
 
    <div> 
 
     <h3>title</h3> 
 
     <ul> 
 
     <li>element 1</li> 
 
     <li>element 2</li> 
 
     <li>element 3</li> 
 
     <li>element 4</li> 
 
     <li>element 5</li> 
 
     </ul> 
 
    </div> 
 
    <div> 
 
     <h3>title</h3> 
 
     <ul> 
 
     <li>element 1</li> 
 
     <li>element 2</li> 
 
     <li>element 3</li> 
 
     <li>element 4</li> 
 
     <li>element 5</li> 
 
     </ul> 
 
    </div> 
 
    <div> 
 
     <h3>title</h3> 
 
     <ul> 
 
     <li>element 1</li> 
 
     <li>element 2</li> 
 
     <li>element 3</li> 
 
     <li>element 4</li> 
 
     <li>element 5</li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</section>