隐藏flexbox子级并再次显示

Question

我有一个简单的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>

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

Answer 2

.flexbox-container有display: flex。

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

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

如果您从该子元素中删除.hide-item，它将再次变为弹性子元素。

示例：

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

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