Flexbox子元素隐藏后如何恢复显示？

我之前也碰到过这个头疼的问题——用display: none隐藏flex容器里的子元素后，不知道该把display设回什么值才能让它重新作为flex item正常工作，又不想依赖兼容性一般的unset。这里有几个实用的解决方案，你可以根据场景挑选：

方案1：直接设display: block（最简单高效） #

其实flex容器的直接子元素，不管你给它设display: block还是inline，浏览器都会把它识别为flex item，完全不影响布局逻辑。毕竟div元素默认的display就是block，所以恢复的时候直接设置：

.show-item { display: block; }

或者用JS动态调整：

const targetItem = document.querySelector('.flexbox-item.hide-item');
targetItem.style.display = 'block';
targetItem.classList.remove('hide-item');

这个方法兼容性拉满，所有主流浏览器都能完美适配。

方案2：提前存储元素原本的display值 #

如果你不确定元素原本的display属性（比如不是div，是span这类默认inline的标签），可以在隐藏前用JS把它计算后的真实display值存起来：

// 隐藏前先把原始值存在元素的dataset里
const item = document.querySelector('.flexbox-item.hide-item');
item.dataset.originalDisplay = window.getComputedStyle(item).display;

// 需要恢复时直接调用存储的值
item.style.display = item.dataset.originalDisplay;
item.classList.remove('hide-item');

这种方式能100%还原元素原本的状态，完全不用担心出错。

方案3：用visibility + position替代display: none #

如果你的需求只是隐藏元素且不占用布局空间，完全可以换一种隐藏思路，避开修改display属性：

.hide-item {
  visibility: hidden;
  position: absolute;
  pointer-events: none; /* 可选，防止用户点击到隐藏的元素 */
}

.show-item {
  visibility: visible;
  position: static;
}

这种方式下，元素的display属性始终保持原本的取值，恢复时只要移除hide-item类或者重置这两个属性就行，彻底不用纠结display的取值问题。

方案4：用CSS变量控制显示状态 #

如果你的项目不需要兼容IE浏览器，用CSS变量来管理显示状态会更灵活简洁：

.flexbox-item {
  flex: 1 0 0;
  height: 40px;
  background-color: aqua;
  --display-status: block;
  display: var(--display-status);
}

.hide-item {
  --display-status: none;
}

恢复时只要重置变量即可：

const targetItem = document.querySelector('.flexbox-item.hide-item');
targetItem.style.setProperty('--display-status', 'block');
targetItem.classList.remove('hide-item');

内容的提问来源于stack exchange，提问作者John Ohara