表示できる：フレックス;壊れる？

Question

このスニペットで私は2つのセクションを持っています。

最初のものは2つの列（display：flex;を使用）とその上の1つの列のヘッダーを示しています。私はその場所に "フレックス"を維持するために中間タグ（この場合は記事）を使用する必要があります。

しかし、h2要素（h2：first-of-typeなど）のように、2番目のケースで割り当てることができるCSSプロパティがあるかどうかは分かりません。したがって、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>