Question

我有一个两列的flexbox，最后一个元素为flex-grow。当我在两列中间放置一个隐藏元素时，效果很好

.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>

Flexbox末尾的CSS隐藏div

2 个答案: