假设有一个具有可变大小间隙的弹性容器:
gap: clamp(20rem, 50%, 40rem);个
并且该容器具有包含文本A flex item that will wrap at some point的两个项.
如何才能强制将夹紧的间隙值减小到边界before的最小值，其中任一项中的文本开始换行为多行？我们的愿望是，当事情变得紧张时，文本换行是最后一件事.
约束条件:
- 文本内容不能提前预测(可能会在页面通过第三方JS呈现后动态更改).
- 容器宽度无法提前预测(在通过第三方JS呈现页面后，容器宽度可能会动态变化).
- 弹性项的数量不能提前预测(在通过第三方JS呈现页面之后可能会动态变化).
- 内容物不得水平溢出任何容器.
- 不能使用页面上加载的JS，因为它可能会导致布局改变，从而对网络命脉产生负面影响.
做can件事:
- Flex是可选的！如果有一种不灵活的方法，请随时提出建议！
请看下面的例子.
(
new ResizeObserver(entries => {
const item_1 = document.querySelector('.item:first-child');
const item_2 = document.querySelector('.item:last-child');
const gap = item_2.getBoundingClientRect().left - item_1.getBoundingClientRect().right;
document
.querySelector('.read-out')
.textContent = 'Flex gap: ' + gap;
})
).observe(document.querySelector('body'));h2, .read-out {
text-align: center;
}
.flex-container {
position: relative;
display: flex;
gap: clamp(20rem, 50%, 40rem);
justify-content: center;
}
.item {
display: inline-block;
background: red;
padding: 1rem;
}<h2>Goal: Ensure that the 'gap' property reduces down to 320 pixels BEFORE text in either item wraps </h2>
<div class="flex-container">
<div class="item">A flex item that will wrap at some point</div>
<div class="item">A flex item that will wrap at some point</div>
</div>
<div class="read-out"></div>Original design intention:
