在Flexbox，就结束CSS隐藏的div [复制]

Question

这个问题已经在这里有一个答案：

• Can I combine :nth-child() or :nth-of-type() with an arbitrary selector? 6个回答

我有最后一个元素柔性长出一个两列Flexbox的。当我把一个隐藏的元素在两列中间它的工作好

.flex {
  display:flex;
}
.flex .item:last-child {
  background-color:lightgreen;
  flex-grow:1;
}
.flex .hidden {
  display:none;
}

<div class="flex">
  <div class="item">1</div>
  <div class="hidden">3</div>
  <div class="item">2</div>
</div>

当我把隐藏的元素在最后我有最后一个元素的空间问题

.flex {
  display:flex;
}
.flex .item:last-child {
  background-color:lightgreen;
  flex-grow:1;
}
.flex .hidden {
  display:none;
}

<div class="flex">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="hidden">3</div>
</div>

怎么会？

Answer 1

:last-child会影响到最后一个元素，独立的，如果它有display: none，visibility: hidden，opacity: 0等。有这一点。在第一种情况下要应用flex-grow: 1到未显示none，第二壳体的相对的元件。

您可以使用各种设置的元素，如果有display: none，它不会出现在DOM明显。

Answer 2

解决方案

.flex {
  display:flex;
}
.flex .item-1 {
  background-color:lightblue;
}
.flex .item-2 {
  background-color:lightgreen;
  flex-grow:1;
}
.flex .hidden {
  display:none;
}

<div class="flex">
  <div class="item-1">1</div>
  <div class="item-2">2</div>
  <div class="hidden">3</div>
</div>

或者对我来说最清晰的方式，围绕打造项额外的div

.flex .items {
  display:flex;
  width:100%;
}
.flex .items .item:last-child {
  background-color:lightgreen;
  flex-grow:1;
}
.flex .hidden {
  display:none;
}

<div class="flex">
  <div class="items">
    <div class="item">1</div>
    <div class="item">2</div>
  </div>
  <div class="hidden">3</div>
</div>