css - 可以显示: flex; be broken?

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>