Flexbox子元素：有没有重置"display: none"的任何方法？

Question

通常情况下，我会将移动站点上的长菜单设为初始 display: none，并使用一个 Javascript 的“展开”按钮来将它们切换回 display: flex（或其他）。但这一次，我不能隐藏弹性父元素。我只能隐藏特定的弹性子元素，因为某些其他元素必须可见。但是没有 display: flex-child 可以切换回去... 有解决方法吗？

- Lee Saxon

---

你能发一些代码吗，比如你是如何隐藏的，以及你是如何尝试再次显示它的？ - iagowp

Answer 1

Flex项目之所以成为Flex项目，并不是因为它们具有某些特殊的"display"值，而是因为它们是Flex容器的子元素。由于Flex项目将被块化，因此"display"值几乎无关紧要。

因此，例如，您可以在"display: none"和"display: block"之间切换。

但也考虑到折叠：

在Flex项目上指定"visibility: collapse"会使其成为一个折叠的Flex项目，产生类似于在表格行或表格列上指定"visibility: collapse"的效果：折叠的Flex项目完全从渲染中移除，但留下一个"支撑结构"，以保持Flex行的交叉大小稳定。

因此，如果Flex容器只有一个Flex行，则动态折叠或取消折叠项目可能会改变Flex容器的主要大小，但保证不会对其交叉大小产生影响，也不会导致页面布局的其他部分出现"晃动"。

ul, ul > li {
  display: inline-flex;
  flex-flow: column;
}
ul > li {
  border: 1px solid;
}
ul > li:not(:target):not(:hover) > ul {
  visibility: collapse;
}

<ul>
  <li id="nav-about"><a href="#nav-about">About</a>
  <li id="nav-projects"><a href="#nav-projects">Projects</a>
    <ul>
      <li>Art</li>
      <li>Architecture</li>
      <li>Music</li>
    </ul>
  <li id="nav-interact"><a href="#nav-interact">Interact</a>
</ul>
<p>Hover over the menu above: each section expands to show its sub-items. In order to keep the menu width stable, <code>visibility: collapse</code> is used instead of <code>display: none</code>. This results in a sidebar that is always wide enough for the word “Architecture”, even though it is not always visible.</p>

- Oriol

---

显示类型在需要区分块容器框、表格框或其他类型的框，甚至是嵌套的 flex 容器时很重要。但如果所有的 flex 项都是简单的块容器，则 display: block 就足够了。 - BoltClock