Question

我试图通过转换flex和flex-basis属性来暂时隐藏某些内容。

以下链接是我所遇到问题的过度简化演示。看看第一个项目如何继承额外的空间...... http://codepen.io/mr_webster/pen/BWNWKo

<div class="box">
<div class="item first">item</div>
<div class="item second">
<p>item</p>
</div>
<div class="item third">
<p>item</p>
</div>
<div class="item forth">item</div>
</div>

.box {
display: flex;
flex-wrap: wrap;
}

.item {
flex: 1 0 50%;
background: tomato;
overflow: hidden;
}

.first { flex: 0 0 100%; }
.second { flex: 0 0 0; }
.forth { flex: 0 0 100%; }

这里的第二个链接更符合我想要实现的目标，但仍然展示了添加额外空间的问题。 http://codepen.io/mr_webster/pen/oZXBMd

有关为何发生这种情况或如何解决问题的任何建议将不胜感激。：）

Answer 1

在第二个链接中，单击按钮后添加的空间是由第二个div <div class="item second">引起的，因为从技术上讲，它仍然是正常流程的一部分。解决这个问题的方法是在点击按钮后“删除”第二个div。对您的代码进行以下编辑：

.box {
  display: flex;
  flex-wrap: wrap;
  background: tomato; /*add background color to your .box. This is needed for animation reasons*/
}

.box.toggle {
  .second {
    flex: 0 1 0%;
    height: 0; /* This hides the second div and removes the space you're referring to.*/
  }
}

希望这适合你。

Answer 2

这是我想出的一个可能的解决方案，虽然它感觉很讨厌，我希望有更优雅的东西。 http://codepen.io/mr_webster/pen/mWJzRR

我正在转换max-height并转换容器元素。

<div class="item second">
  <div class="second-container">
    <p>item</p>
    <p>item</p>
  </div>
</div>

.second-container {
  transition-property: max-height, transform;
  transition-timing-function: ease-in-out;
  transition-duration: 2s;
  transform: translateX(0);
  max-height: 1000px;
  width: 200px;
  overflow: hidden;
}

second-container {
  max-height: 0;
  transform: translateX(-100%);
}

flex-basis：0溢出隐藏添加空间笨拙

2 个答案: