0

所以，问题来了：

我用 flexbox 做了一行。它有 2 列：如果有足够的空间，可以在
|some dynamic text | [dynamic tags]| 哪里列出标签列表，或者当没有足够的空间容纳所有标签时，可以是单个图标。[dynamic tags]在此处输入图像描述

在此处输入图像描述

我目前的方法是使用两个项目制作一个内联线。如果没有空格，一部分转到第二行，用 隐藏overflow: hidden。

这是一个例子：http: //jsbin.com/IVUyATO/13/edit

在我想让第一列和第二列具有相同的扩展因子之前，它工作得非常好。所以他们可以平等地占据空间。像这样：http: //jsbin.com/IVUyATO/15/edit

但这是我现在需要解决的问题 - 当标签进入第二行时，它们仍然在第二列中获得空间，因此第一个不使用可见的空白空间。

也许有完全不同的方法，我错过了。

这是html正文

<div class="line">
  <div class="description-container">
    something 2 something 3 something 4
  </div>
  <div class="tags-container">
    <div class="more-tags">more tags</div>
    <div class="tags">
      <span>tag1</span>
      <span>tag2</span>
      <span>tag3</span>
      <span>tag4</span>
      <span>tag5</span>
      <span>tag4</span>
      <span>tag5</span>
      <span>tag6</span>
    </div>

  </div>
  <div class="right-container"></div>
</div>

body{
  width: 100%;
  padding:0;
  margin:0;
  background: white;
}
.line{
  display: flex;
  height: 50px;
  border-top:1px solid lightgray;
  border-bottom:1px solid lightgray;
}
.line > div{
  flex: 0 0 auto;
}
.right-container{
  width: 100px;
  background: rgba(100,0,0,0.1);
}
.line .tags-container{
  flex: 1 1 auto;
  background: magenta;
  //TODO - Uncomment next line to see final effect
  /* overflow:hidden; */ 
  .more-tags{
    float:right;
    background: green;
    height: 50px;
    width: 80px;
  }
  .tags{
    float:right;
    background: yellow;
    white-space: nowrap;
    height: 50px;
    margin-right:-80px;
    .tag{
      display:inline-block;
      border-radius: 4px;
    }
  }
}
.line .description-container{
  background: rgba(0,0,200,0.1);
}

更新

我想我明白我试图解决另一个问题，并且我已经知道如何描述它。就是这样 - 只有当它比容器的一半宽时才使用 flexbox 收缩列

4

0 回答 0