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

我对我先前在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>

最佳答案

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

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