Question

在这个片段中，我有两个部分。

第一列显示两列（使用display：flex;）和一列上方的标题。我必须使用中间标签（本例中的文章）来保持＆＃34; flex＆＃34;在它的位置。

但是我想知道是否有一个CSS属性，我可以在第二种情况下分配给h2元素，（比如h2：first-of-type或者什么）所以flex属性只会影响div，并跳过h2，因此底部的行为与第一种情况类似。

有这样的功能吗？

＆＃13;

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

＆＃13;

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

＆＃13;

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>

可以显示：flex;被打破了？

1 个答案: