css - 隐藏 flexbox child 并再次可见

Question

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

我需要有选择地隐藏其中一个子项，我使用 display: none 来做到这一点。

但是，稍后，我需要恢复元素的可见性 - 但作为什么？ I 它不是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>