可以顯示：flex;被打破？

Question

在這個片段中，我有兩個部分。

第一個顯示兩列（使用display：flex;）和一列上方的標題。我必須使用中間標籤（在這種情況下是文章）來保持「flex」的位置。

但我想知道是否有一個CSS屬性，我可以分配例如在第二種情況下，到h2元素，（如h2：first-of-type或其他），所以flex屬性隻影響div ，並跳過h2，因此底部部分的行爲與第一種情況相似。

有這樣的功能嗎？

.Flex { 
 
    display: flex} 
 

 
div { 
 
    background-color: #CCC; 
 
    margin: 2px; 
 
    padding: 50px; 
 
    width: 50%;} 
 

 
h2 {text-align: center;} 
 
    
 
/* This is just for visual */ 
 
section { 
 
    background-color: #999; 
 
    padding: 10px; 
 
    margin: 10px;}

<section> 
 
    <h2>Title on one full width Column</h2> 
 
    <article class="Flex"> 
 
    <div>Column three</div> 
 
    <div>Column four</div> 
 
    </article> 
 
</section> 
 

 

 
<section class="Flex"> 
 
    <h2>Title on one Column</h2> 
 
    <div>Column one</div> 
 
    <div>Column two</div> 
 
</section>

Answer 1

*{box-sizing: border-box;} 
 
.Flex { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    } 
 

 
div { 
 
    background-color: #CCC; 
 
    border: 2px solid #999; 
 
    padding: 50px; 
 
    width: 50%;} 
 

 
h2 {text-align: center;} 
 
.Flex h2{ 
 
    width: 100%; 
 
} 
 
/* This is just for visual */ 
 
section { 
 
    background-color: #999; 
 
    padding: 10px; 
 
    margin: 10px;}

<section> 
 
<h2>Title on one full width Column</h2> 
 
<article class="Flex"> 
 
    <div>Column three</div> 
 
    <div>Column four</div> 
 
</article> 
 
    </section> 
 

 

 
    <section class="Flex"> 
 
<h2>Title on one Column</h2> 
 
<div>Column one</div> 
 
<div>Column two</div> 
 
    </section>