Css 隐藏flexbox子项并使其再次可见

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

我需要有选择地隐藏其中一个子项，我使用

display:none

但是，稍后，我需要恢复项目的可见性-但是作为什么？我认为它不是一个

flex

，我也不认为它是一个

内联flex

，那么它是什么呢

我不能使用

display:unset

，因为它似乎只受到适度支持。有什么想法吗

.container{
利润率：40像素；
}
.flexbox容器{
显示器：flex；
}
.flexbox项目{
弹性：100；
高度：40px；
背景色：浅绿色；
}
.flexbox项：非（：第一个子项）{
左边距：20px；
}
.隐藏项目{
显示：无；
}

小孩
小孩
小孩

只需将其重置为

显示：块

.container{
利润率：40像素；
}
.flexbox容器{
显示器：flex；
}
.flexbox项目{
弹性：100；
高度：40px；
背景色：浅绿色；
}
.flexbox项：非（：第一个子项）{
左边距：20px；
}
输入：选中+.flexbox容器>.hide项{
显示：块；
}
.隐藏项目{
显示：无；
}

切换这个
小孩
小孩
小孩

只需将其重置为

显示：块

.container{
利润率：40像素；
}
.flexbox容器{
显示器：flex；
}
.flexbox项目{
弹性：100；
高度：40px；
背景色：浅绿色；
}
.flexbox项：非（：第一个子项）{
左边距：20px；
}
输入：选中+.flexbox容器>.hide项{
显示：块；
}
.隐藏项目{
显示：无；
}

切换这个
小孩
小孩
小孩

。flexbox容器具有
显示：flex

因此，
.flexbox container
的所有子元素都是flex子元素

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

如果从该子元素中删除
.hide item
，它将再次变回flex子元素

示例：

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

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

.flexbox容器
具有
显示：flex

因此，
.flexbox container
的所有子元素都是flex子元素

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

如果从该子元素中删除
.hide item
，它将再次变回flex子元素

示例：

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

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

div的可能重复是块所以显示：“block”你如何隐藏它，你能在这里共享一个实时场景吗？div的可能重复是块所以显示：“block”你如何隐藏它，你能在这里共享一个实时场景吗？很简单！我在想，将display设置回block会覆盖作为flex项子项的div状态，但它似乎确实有效。@JohnOhara甚至内联block也会有效，或者
initial
（相关：）就这么简单！我原以为将display设置回block会覆盖作为flex项子项的div状态，但它似乎确实起作用。@JohnOhara甚至内联块也会起作用，或者
initial
（相关：）