html - 如何根据另一个 child 的存在来定位这个 flexbox child ？

Question

我快速跟进了我之前发布的问题 here .

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

最佳视觉效果在此 codepen

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

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

我尝试过的:

不透明度: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 添加一个类并覆盖高度。