Скрыть дочерний флексбокс и снова сделать видимым

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>

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');