通过将显示更改为固定来“弹出”最小内容的 flex 项目-解网

问：

问题

我正在尝试使用普通的 html、css 和 javascript 制作一个网页，该网页具有一个 flexbox，其中包含一堆已设置为 .widthmin-content

我想让它成为这样，单击一个 flex 项目会导致它“弹出”flexbox 并“粘”在屏幕上。但是，只需将 flex 项的属性更改为，就会导致其他 flex 项重新调整自身以填补空白。相反，我希望“弹出”的 flex 项目只是在其位置上留出一个间隙，这样其他 flex 项目就不会四处移动或自行调整。displayfixed

当前解决方案

我尝试将每个 flex 项目包装在一个包装器 div 中，并使之成为当单击一个项目时，包装器接收到一个固定的宽度等于 .完成后，可以在不干扰其他柔性项目的情况下制作包装元素<wrapper>.getBoundingClientRect().widthfixed

当前解决方案的缺点

上述解决方案似乎仅在 flex 项的宽度设置为具体值（如或）时才有效。如果宽度设置为（这是我需要的），其他 flex 项目仍然会抖动！100px5vwmin-content

下面是一个最小可重现的例子：https://codepen.io/renzev/pen/mdvqLWG 。正如你所看到的，点击一个 flex 项目确实会导致它从 flexbox 中“弹出”，但它和周围的 flex 项目仍然会改变大小！

我的问题

如何在不导致周围柔性物品改变大小的情况下实现所需的“弹出”行为？

javascript html flexbox css-position

我看了看你的代码笔，我注意到你在做什么......

经过进一步检查，您实际上并没有移动整个包装纸（因此我可以假设一旦您点击卡片，您就不关心包装纸的实际位置。
因此，解决方案实际上非常简单......在弹出卡片之前对包装纸的宽度进行采样（就像您已经做的那样），然后在弹出卡片后设置包装纸的宽度。

为此，可以在换行框上设置 maxWidth 和 minWidth 属性。所以你的 javascript 函数变成了。

function popOut(card) {
  wrap = card.parentElement

  bbox_wrap = wrap.getBoundingClientRect();
  wrap.style.width = bbox_wrap.width + "px";
  wrap.style.height = bbox_wrap.height + "px";

  bbox_card = card.getBoundingClientRect();
  card.style.position = 'fixed';
  card.style.left = bbox_card.x + "px";
  card.style.top = bbox_card.y + "px";
  card.style.width = bbox_card.width + "px";
  card.style.margin = "0px";
  wrap.style.maxWidth = bbox_wrap.width + "px"; //necessary to make sure it doesn't grow
  wrap.style.minWidth = bbox_wrap.width + "px"; //necessary to make sure it doesn't shrink
}

现在，如果您关心包装器的位置（同样从您当前的代码来看，它看起来不像您这样做），那么在这种情况下，您将创建另一个包含空内容的包装器 div，并相应地设置该宽度/高度，并将该包装器 div 留在后面。
这里已经有一个答案，演示了如何克隆包装元素......然后，如果希望不可见且就位，则可以将不透明度设置为 0。

通过将显示更改为固定来“弹出”最小内容的 flex 项目

"pop out" min-content flex items by changing display to fixed

问题

当前解决方案

当前解决方案的缺点

我的问题

评论

评论