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>