gpt4 book ai didi

javascript - Flexbox:一旦另一个 flex 元素的宽度为 0,如何包装一个 flex 元素?

转载 作者:行者123 更新时间:2023-12-04 14:47:11 24 4
gpt4 key购买 nike

我有一个包含 2 个元素的 flex 容器。这是一个 JSFiddle Demo .第一个是带有文本的动态 标题。第二个是多个动态 按钮的包装器。动态意味着文本是用 javascript 生成的,没有特定的 width 并且可以有 2-4 个按钮,具体取决于用户(所以我不能设置 flex-basiswidth 到这些 flex-items 上特定数量的 px

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

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

enter image description here

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>

最佳答案

您可以通过在第一个容器上使用大的 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>

关于javascript - Flexbox:一旦另一个 flex 元素的宽度为 0,如何包装一个 flex 元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69823407/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com