隐藏 flexbox 子元素并再次可见答案

【问题标题】：Hide flexbox child and make visible again隐藏 flexbox 子元素并再次可见
【发布时间】：2019-05-30 20:40:11
【问题描述】：

我有一个简单的 flexbox 场景 - 父级、少量项目等。

我需要有选择地隐藏其中一个子项，我使用 display: none 进行。

但是，稍后，我需要恢复项目的可见性 - 但作为什么？我不是flex，我想也不是inline-flex，那是什么？

我不能使用display: unset，因为它似乎只受到适度支持。有任何想法吗？

.container {
  margin: 40px;
}

.flexbox-container {
  display: flex;
}

.flexbox-item {
  flex: 1 0 0;
  height: 40px;
  background-color: aqua;
}

.flexbox-item:not(:first-child) {
  margin-left: 20px;
}

.hide-item {
  display: none;
}

<div class="container">
  <div class="flexbox-container">
    <div class="flexbox-item">child</div>
    <div class="flexbox-item hide-item">child</div>
    <div class="flexbox-item">child</div>
  </div>
</div>

【问题讨论】：

Toggle display:none style with JavaScript的可能重复
div 是块所以 display:"block"
你是怎么隐藏的，你能在这里分享一下情况的实时场景吗？

标签： css flexbox

【解决方案1】：

只需将其重置回display:block

.container {
  margin: 40px;
}

.flexbox-container {
  display: flex;
}

.flexbox-item {
  flex: 1 0 0;
  height: 40px;
  background-color: aqua;
}

.flexbox-item:not(:first-child) {
  margin-left: 20px;
}

input:checked+.flexbox-container>.hide-item {
  display: block;
}

.hide-item {
  display: none;
}

<div class="container">
  <label>Toggle This</label>
  <input type="checkbox">
  <div class="flexbox-container">
    <div class="flexbox-item">child</div>
    <div class="flexbox-item hide-item">child</div>
    <div class="flexbox-item">child</div>
  </div>
</div>

【讨论】：

就这么简单！我在想将显示设置回阻止会覆盖 div 状态作为 flex 项的子项 - 但它似乎确实有效。
@JohnOhara 甚至 inline-block 也可以工作，或者initial（相关：stackoverflow.com/a/55496749/8620333）

【解决方案2】：

.flexbox-container 拥有display: flex。

所以.flexbox-container 的所有子元素都是flex-children。

如果您将.hide-item 添加到这些子元素之一，则该元素现在具有display: none。

如果您从该子元素中删除 .hide-item，它会再次成为 flex-child。

示例：

const hiddenChild = document.querySelector('.hide-item');

hiddenChild.classList.remove('hide-item');

【讨论】：