代码之家  ›  专栏  ›  技术社区  ›  Daniel

如何删除下面包装的flex元素后剩余的空格?

  •  4
  • Daniel  · 技术社区  · 6 年前

    我有一个内嵌flex元素,其中包含很少信息的徽章。 这样做的目的是让按钮始终可见,但将徽章一个接一个地包装在较小的设备上。

    我希望按钮始终贴在最后一个徽章上。

    问题是,当徽章收起并消失时,它会在其余可见徽章和按钮之间留下一些空白或结构。

    如何使用纯CSS删除此空间?

    .badges {
      border: 1px solid red;
      height: 25px;
      max-height: 25px;
      line-height: 25px;
      padding-right: 120px;
      /* creates space for the button */
      position: relative;
      overflow: hidden;
      display: inline-flex;
      flex-wrap: wrap;
    }
    
    .badges .badge {
      border: 1px solid green;
    }
    
    .badges button {
      width: 120px;
      max-width: 120px;
      min-width: 120px;
      height: 25px;
      position: absolute;
      right: 0;
    }
    <div class="badges">
      <div class="badge">FooBar 418$</div>
      <div class="badge">Baz 132$</div>
      <div class="badge">BarFoo 321$</div>
      <div class="badge">Qux 500$</div>
      <button>Find out more</button>
    </div>
    1 回复  |  直到 5 年前
        1
  •  5
  •   VXp Kadir BuÅ¡atlić    6 年前

    您可以添加 flex-grow: 1; 在…上 .badge 告诉它占用所有可用空间。

    .badges {
      border: 1px solid red;
      height: 25px;
      max-height: 25px;
      line-height: 25px;
      padding-right: 120px;
      /* creates space for the button */
      position: relative;
      overflow: hidden;
      display: inline-flex;
      flex-wrap: wrap;
    }
    
    .badges .badge {
      border: 1px solid green;
      flex-grow: 1; 
    }
    
    .badges button {
      width: 120px;
      max-width: 120px;
      min-width: 120px;
      height: 25px;
      position: absolute;
      right: 0;
    }
    <div class="badges">
      <div class="badge">FooBar 418$</div>
      <div class="badge">Baz 132$</div>
      <div class="badge">BarFoo 321$</div>
      <div class="badge">Qux 500$</div>
      <button>Find out more</button>
    </div>