如何根据另一个孩子的存在来定位这个 flexbox 孩子？

Question

我有一个快速跟进我之前在here 发布的问题。

我正在尝试根据是否存在另一个子元素来定位 flexbox 子元素。

在此codepen 中呈现最佳可视化

在某些面板中，不会加载 ICON3。容器接收hidden 的类，我可以选择用display 或opacity 等隐藏它。

我希望 ICON4 保持在右侧，并与 ICON2 保持一致，并让包装器相应地调整大小。但我似乎无法让它工作。

我尝试过的：

opacity: 0 - 这将 ICON4 保持在右侧，但不会调整包装器的大小，因为 ICON3 仍然存在并占用空间。

display: none - 这只是将 ICON4 移动到 ICON3 所在的位置。

还尝试使用.hidden + .four 进行样式组合，但我找不到可行的解决方案。

不胜感激！

以下片段：

* {
  font-family: sans-serif;
}
.wrapper {
  display: flex;
  align-items: flex-start;
  width: 500px;
  background-color: #F9F9F9;
  padding: 10px;
  position: relative;
  margin-bottom: 2em;
}
.image {
  width: 150px;
  margin-right: 1em;
}
.row {
  display: flex;
  flex-direction: column;
  flex: 1 0 0;
}
.more {
  font-weight: bold;
  margin-top: 1em;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 4em;
  justify-content: space-around;
}
.hidden {
  opacity: 0;
  /*display: none;  // this pushes ICON4 underneath */
}
.hidden + .four {
  /*margin-bottom: 1.4em; // this seems to position .four correctly, but doesn't alter height of .wrapper */
}
.four {
  margin-top: auto;
}
.ideal {
  position: absolute;
  bottom: 20px;
  right: -44px;
}
.ideal span {
  color: green;
  font-weight: bold;
  opacity: .2;
  margin-right: 4em
}
.ideal {
  position: absolute;
  bottom: 32px;
  right: -201px;
}
.ideal span {
  color: green;
  font-weight: bold;
  opacity: .2;
  margin-right: 4em
}

<div class="wrapper">
  <div class="image">
    <img src="http://placehold.it/150x68" alt="" />
  </div>
  <div class="row">
    <span>Text content</span>
    <span>Text content</span>
    <span>Text content</span>
    <div class="more">
      <span class="one">ICON1
      </span>
      <span class="two">ICON2</span>
      <span class="three hidden">ICON3</span>
      <span class="four">ICON4</span>
    </div>
  </div>
  <div class="ideal"><span>ICON4</span>&lt; ideal position and wrapper to resize</div>
</div>

Answer 1

我忽略了.more上的高度规则

我不认为我用 css 更改它，因为它是父级，但使用 javascript 我可以向 .more 添加一个类并覆盖高度。