flex容器內部的塊元素不表現出預期的行爲

Question

我需要一些幫助來理解對我而言是一種意外的行爲。

爲什麼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

因爲這是一個柔性row集到nowrap這意味着父的每一個彎曲子將在一個水平行中的細胞/列。

你要麼需要在h2使用width: 100%或flex-basis: 100%並添加flex-wrap: wrap到section，或者你可以只移動h2上述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>

或者刪除來自section的flex屬性並將3列div包裝到新元素中並在其中應用柔性元素。

.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>