Question

我正在尝试在现有网站上使用Flexbox，我需要以某种方式告诉浏览器“跳过”树中的几个div。

让我解释一个简化的例子。我有这样的HTML

<body style="display: flex;   
             min-height: 100vh;   
             flex-direction: column;">
    <div id="want_to_skip">
        <div style="flex: 1;">
        </div>
        <div id="footer"></div>
    </div>
</body>

我希望它表现得像这样

<body style="display: flex;   
             min-height: 100vh;   
             flex-direction: column;">
    <div style="flex: 1;">
    </div>
    <div id="footer"></div>
</body>

不幸的是，我需要“跳过”的div才能存在并且无法将其删除。我该怎么办？

Answer 1

CSS Display L3介绍了display: contents：

元素本身不生成任何框，但它的子元素和伪元素仍然正常生成框。出于...的目的框生成和布局，必须将元素视为具有已被文档中的子元素和伪元素替换树。

#want_to_skip {
    display: contents;
}

body {
  display: flex;
  margin: 0;
}
body > div {
  flex: 1;
}
.wrapper {
  display: flex;   
  min-height: 100vh;   
  flex-direction: column;
  border: 1px solid;
}
.top {
  flex: 1;
}
.want_to_skip {
  display: contents;
}

<div>
  <div class="wrapper">
    <div>
      <div class="top">   No skipping - Top   </div>
      <div class="bottom">No skipping - Bottom</div>
    </div>
  </div>
</div>
<div>
  <div class="wrapper">
    <div class="want_to_skip">
      <div class="top">   Skipping - Top   </div>
      <div class="bottom">Skipping - Bottom</div>
    </div>
  </div>
</div>
<div>
  <div class="wrapper">
      <div class="top">   Desired - Top   </div>
      <div class="bottom">Desired - Bottom</div>
  </div>
</div>

目前，它仅受Firefox 37支持。

如何在使用Flexbox时“跳过”HTML树中的div？

1 个答案: