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

Posted 2023-03-05

【中文标题】Flexbox：一旦另一个弹性项目的宽度为0，如何包装一个弹性项目？

【英文标题】：Flexbox: how to wrap a flex item once the width of another flex item is 0?

【发布时间】：2021-12-17 17:56:24

【问题描述】：

我有一个包含 2 个元素的 flex 容器。这是JSFiddle Demo。第一个是带有文本的 dynamic 标题。第二个是多个 dynamic 按钮的包装器。动态含义文本是用javascript生成的，没有特定的width，并且可以有2-4个按钮，具体取决于用户（所以我不能将flex-basis或width设置为特定数量的px on这些弹性项目）。

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

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

This article 让我相信它与 flex-basis 属性有关。

使用 flex-wrap 的第一个问题是，只有当它们的总 flex-basis 大于 flex 容器的大小时，flex 项目才会开始包装。

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

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

【参考方案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>

【讨论】：

很酷的解决方案，谢谢。你能解释一下This will give more priority to the first container for the shrink effect是什么意思吗？

@Reinier68 最初两者将具有相同的收缩因子 (1)，因此它们将以相同的方式收缩。如果你给第一个很大的数字，它会缩小更多。我添加了另一个没有 flex-shrink 和更少代码的想法

啊，好吧，清楚。我也试过你的其他解决方案。但是，这会破坏 text-overflow: ellipsis 属性。

@Reinier68 不，我也更新了 html