Flexbox：一旦另一个弹性项目的宽度为 0，如何包装一个弹性项目？

Question

我得到了一个包含 2 个元素的弹性容器。这里有一个JSFiddle Demo。第一个是带有文本的 dynamic header。第二个是多个 dynamic 按钮的包装器。动态意味着文本是用 javascript 生成的，没有特定的 width 并且可以有 2-4 个按钮，具体取决于用户（所以我不能设置 flex-basis 或 width 到特定数量的 px 这些 flex-items).

我已将文本的溢出设置为 hidden，将 text-overflow 属性设置为 ellipsis。

现在我希望按钮换行 仅当文本完全消失时。这就是我的意思：

This article 让我相信它与 flex-basis 属性.

有关

The first gotcha with flex-wrap is that flex items will only begin to wrap if their sum total flex-basis is greater than the size of the flex container.

然而，无论我尝试什么属性，我似乎都无法让它按照我想要的方式工作。

.wrapper {
  display: flex;
  justify-content: space-between;
  border: 1px solid red;
  max-width: 600px;
}

.flex-wrapper {
  display: flex;
  min-width: 0;
}

.header {
  overflow: hidden;
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 24px;
}

.actions {
  display: flex;
  /* Only wrap once the text is fully gone and not visible anymore. */
  /* flex-wrap: wrap; */
}

.actions button:not(:last-child) {
  margin-right: 10px;
}

<div class="wrapper">
  <div class="flex-wrapper">
    <div class="header">
      Lorem ipsum dolar sit amet constructeur
    </div>
  </div>
  <div class="actions">
    <button>
      button1
    </button>
    <button>
      button2
    </button>
    <button>
      button3
    </button>
    <button>
      button4
    </button>
  </div>
</div>

Answer 1

您可以通过在第一个容器上使用大 flex-shrink 来近似。这将使收缩效果的第一个容器具有更高的优先级。

.wrapper {
  display: flex;
  justify-content: space-between;
  border: 1px solid red;
  max-width: 600px;
}

.flex-wrapper {
  display: flex;
  min-width: 0;
  flex-shrink:99999;
}

.header {
  overflow: hidden;
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 24px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  column-gap:10px; /* you can use gap with flexbox*/
}

<div class="wrapper">
  <div class="flex-wrapper">
    <div class="header">
      Lorem ipsum dolar sit amet constructeur
    </div>
  </div>
  <div class="actions">
    <button>
      button1
    </button>
    <button>
      button2
    </button>
    <button>
      button3
    </button>
    <button>
      button4
    </button>
  </div>
</div>

您还可以像下面这样简化所有代码：

.wrapper {
  display: flex;
  border: 1px solid red;
  max-width: 600px;
}

.flex-wrapper {
  flex-basis:0;
  flex-grow:1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 24px;
}


.actions {
  display: flex;
  flex-wrap: wrap;
  column-gap:10px; /* you can use gap with flexbox*/
}

<div class="wrapper">
  <div class="flex-wrapper">
      Lorem ipsum dolar sit amet constructeur
  </div>
  <div class="actions">
    <button>
      button1
    </button>
    <button>
      button2
    </button>
    <button>
      button3
    </button>
    <button>
      button4
    </button>
  </div>
</div>

Flexbox：一旦另一个弹性项目的宽度为 0，如何包装一个弹性项目？

Flexbox: how to wrap a flex item once the width of another flex item is 0?

html

javascript

css

css-position

flexbox