在溢出前将不同长度的元素包裹 X 次

Question

我正在尝试显示一个简单的标签列表，其中包含不同长度的标签，这些标签将跨越 3 行，然后水平溢出，同时使用 React 可滚动。

标签只包含文本、边框，其他不多：

这里有一张宏伟的图来说明我试图用不同数量的标签渲染的内容：

这是我目前使用的代码，它的标签在错误的方向上垂直溢出：

:root {
    --scpu-bg: #1b1b1b;
    --scpu-border: #3d3d3d;

    --scpu-fg: #ffffff;

    color: var(--scpu-fg);

    font-size: 14px;
}

body {
    background-color: var(--scpu-bg);
}

.tag-chip {
    padding: 1rem;
    border: 1px var(--scpu-border) solid;
}

.tag-cloud {
    overflow-x: scroll;
 }
 
    .tag-list {
        /*display: grid;

        grid: 1fr 1fr 1fr / ;*/

        max-height: 11rem;
        display: flex;
        gap: 0.7rem;
        flex-wrap: wrap;
    }

<div class="tag-cloud">
  <div class="tag-list nav-scroll">
    <span class="tag-chip">6000</span><span class="tag-chip">alagadda</span
    ><span class="tag-chip">artifact</span><span class="tag-chip">audio</span
    ><span class="tag-chip">biological</span
    ><span class="tag-chip">blackwood</span><span class="tag-chip">_cc</span
    ><span class="tag-chip">co-authored</span
    ><span class="tag-chip">container</span><span class="tag-chip">d-11424</span
    ><span class="tag-chip">daevite</span
    ><span class="tag-chip">deer-college</span
    ><span class="tag-chip">doctor-light</span
    ><span class="tag-chip">doctor-mcdoctorate</span
    ><span class="tag-chip">entropic</span
    ><span class="tag-chip">esoteric-class</span
    ><span class="tag-chip">ethics-committee</span
    ><span class="tag-chip">faeowynn-wilson</span
    ><span class="tag-chip">global-occult-coalition</span
    ><span class="tag-chip">grand-karcist-ion</span
    ><span class="tag-chip">hanged-king</span
    ><span class="tag-chip">hy-brasil</span
    ><span class="tag-chip">interactive</span
    ><span class="tag-chip">la-rue-macabre</span
    ><span class="tag-chip">_licensebox</span><span class="tag-chip">meta</span
    ><span class="tag-chip">metallic</span
    ><span class="tag-chip">narrative</span
    ><span class="tag-chip">on-guard-43</span
    ><span class="tag-chip">portal</span><span class="tag-chip">religious</span
    ><span class="tag-chip">ritual</span
    ><span class="tag-chip">s&amp;amp;c-plastics</span
    ><span class="tag-chip">scp</span><span class="tag-chip">serpents-hand</span
    ><span class="tag-chip">spacetime</span
    ><span class="tag-chip">temporal</span
    ><span class="tag-chip">three-moons-initiative</span
    ><span class="tag-chip">three-portlands</span
    ><span class="tag-chip">wanderers-library</span
    ><span class="tag-chip">weapon</span
    ><span class="tag-chip">wilsons-wildlife</span>
  </div>
</div>

我目前正在使用 display: flex 和 flex-wrap: wrap 来尽可能接近我正在尝试做的事情。

简而言之，我希望标签最多放置 3 行，无论宽度有多大，同时让标签保持自己的宽度。

不幸的是，我只知道组件应该具有的高度，环绕效果不适用于溢出 AFAIK。

If you already know the height of your component, but not the width, why not use flex-direction: column ?

因为每个元素都被赋予相同的宽度，形成一个尴尬的组合：

If you have a set amount of rows, why aren't you using display: grid ?

列不会遇到与上述相同的问题吗？

除了将我的标签数组分成 3 个部分并独立呈现它们之外，还有其他解决方案吗？

Answer 1

老实说，如果您正在寻找唯一的 CSS 解决方案，我认为这将是您所能做的最好的。所有标签都保持自己的宽度，但它们之间有间距以保持其在柔性流动方向上。我认为 align-items: center; 看起来比 align-items: start; 好，但两者都有效。

:root {
     --scpu-bg: #1b1b1b;
     --scpu-border: #3d3d3d;
     --scpu-fg: #ffffff;
     color: var(--scpu-fg);
     font-size: 14px;
}
 body {
     background-color: var(--scpu-bg);
}
 .tag-chip {
     padding: 1rem;
     border: 1px var(--scpu-border) solid;
}
 .tag-cloud {
     overflow-x: none;
     overflow-y: none;
}
 .tag-list {
     max-height: 15rem;
     display: flex;
     gap: 0.7rem;
     flex-wrap: wrap;
     overflow-x: scroll;
     overflow-y: hidden;
     flex-direction: column;
     align-items: center;
}

<div class="tag-cloud">
  <div class="tag-list nav-scroll">
    <span class="tag-chip">6000</span>
    <span class="tag-chip">alagadda</span>
    <span class="tag-chip">artifact</span>
    <span class="tag-chip">audio</span>
    <span class="tag-chip">biological</span>
    <span class="tag-chip">blackwood</span>
    <span class="tag-chip">_cc</span>
    <span class="tag-chip">co-authored</span>
    <span class="tag-chip">container</span>
    <span class="tag-chip">d-11424</span>
    <span class="tag-chip">daevite</span>
    <span class="tag-chip">deer-college</span>
    <span class="tag-chip">doctor-light</span>
    <span class="tag-chip">doctor-mcdoctorate</span>
    <span class="tag-chip">entropic</span>
    <span class="tag-chip">esoteric-class</span>
    <span class="tag-chip">ethics-committee</span>
    <span class="tag-chip">faeowynn-wilson</span>
    <span class="tag-chip">global-occult-coalition</span>
    <span class="tag-chip">grand-karcist-ion</span>
    <span class="tag-chip">hanged-king</span>
    <span class="tag-chip">hy-brasil</span>
    <span class="tag-chip">interactive</span>
    <span class="tag-chip">la-rue-macabre</span>
    <span class="tag-chip">_licensebox</span>
    <span class="tag-chip">meta</span>
    <span class="tag-chip">metallic</span>
    <span class="tag-chip">narrative</span>
    <span class="tag-chip">on-guard-43</span>
    <span class="tag-chip">portal</span>
    <span class="tag-chip">religious</span>
    <span class="tag-chip">ritual</span>
    <span class="tag-chip">s&amp;amp;c-plastics</span>
    <span class="tag-chip">scp</span>
    <span class="tag-chip">serpents-hand</span>
    <span class="tag-chip">spacetime</span>
    <span class="tag-chip">temporal</span>
    <span class="tag-chip">three-moons-initiative</span>
    <span class="tag-chip">three-portlands</span>
    <span class="tag-chip">wanderers-library</span>
    <span class="tag-chip">weapon</span>
    <span class="tag-chip">wilsons-wildlife</span>
    </div>
</div>

Answer 2

let tag = document.querySelector(".tag-chip");
let font = parseInt(getComputedStyle(tag).getPropertyValue("font-size"));
let gap = parseInt(getComputedStyle(tag).getPropertyValue("margin-right"));

const blocks = document.querySelectorAll(".tag-chip");
widths = [];
blocks.forEach((block) => {
  let width = block.getBoundingClientRect().width;
  widths.push(width + gap);
});
const sum = widths.reduce(function(a, b) {
  return a + b;
}, 0);

finalWidth = Math.ceil(sum / (3 * font) + 5); //change 3 by row required.

let tagList = document.querySelector(".tag-list");
let setWidth = tagList.style.setProperty("--finalWidth", `${finalWidth}rem`);

:root {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  --scpu-bg: #1b1b1b;
  --scpu-border: #3d3d3d;
  --scpu-fg: #ffffff;
  --font-400: 16px;
  /*decides 1 rem*/
  --finalWidth: 10rem;
  /*changed by JS*/
  color: var(--scpu-fg);
  font-size: var(--font-400);
}

body {
  background-color: var(--scpu-bg);
  overflow: hidden;
}

.tag-chip {
  display: inline-block;
  padding: 0.4em 1em;
  margin-bottom: 0.5em;
  margin-right: 0.5em;
  border: 1px var(--scpu-border) solid;
}

.tag-cloud {
  width: 95vw;
  overflow-x: auto;
  border: 1px solid black;
  white-space: nowrap;
  padding: 0.5em;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  width: var(--finalWidth);
}

<div class="tag-cloud">
  <div class="tag-list nav-scroll">
    <span class="tag-chip">6000</span>
    <span class="tag-chip">alagadda</span>
    <span class="tag-chip">artifact</span>
    <span class="tag-chip">audio</span>
    <span class="tag-chip">biological</span>
    <span class="tag-chip">blackwood</span>
    <span class="tag-chip">_cc</span>
    <span class="tag-chip">co-authored</span>
    <span class="tag-chip">container</span>
    <span class="tag-chip">d-11424</span>
    <span class="tag-chip">daevite</span>
    <span class="tag-chip">deer-college</span>
    <span class="tag-chip">doctor-light</span>
    <span class="tag-chip">doctor-mcdoctorate</span>
    <span class="tag-chip">entropic</span>
    <span class="tag-chip">esoteric-class</span>
    <span class="tag-chip">ethics-committee</span>
    <span class="tag-chip">faeowynn-wilson</span>
    <span class="tag-chip">global-occult-coalition</span>
    <span class="tag-chip">grand-karcist-ion</span>
    <span class="tag-chip">hanged-king</span>
    <span class="tag-chip">hy-brasil</span>
    <span class="tag-chip">interactive</span>
    <span class="tag-chip">la-rue-macabre</span>
    <span class="tag-chip">_licensebox</span>
    <span class="tag-chip">meta</span>
    <span class="tag-chip">metallic</span>
    <span class="tag-chip">narrative</span>
    <span class="tag-chip">on-guard-43</span>
    <span class="tag-chip">portal</span>
    <span class="tag-chip">religious</span>
    <span class="tag-chip">ritual</span>
    <span class="tag-chip">s&amp;amp;c-plastics</span>
    <span class="tag-chip">scp</span>
    <span class="tag-chip">serpents-hand</span>
    <span class="tag-chip">spacetime</span>
    <span class="tag-chip">temporal</span>
    <span class="tag-chip">three-moons-initiative</span>
    <span class="tag-chip">three-portlands</span>
    <span class="tag-chip">wanderers-library</span>
    <span class="tag-chip">weapon</span>
    <span class="tag-chip">specialist</span>
    <span class="tag-chip">wilsons-wildlife</span>
  </div>
</div>

使用 JS 编辑。

Answer 3

基于，我认为这更接近您想要的。我使用 grid 而不是 flexbox，但请注意，只需向 tag-chip 添加一些额外的样式并将 align-items: center 更改为 align-items: stretch.

，您就可以获得与他们的答案相同的结果

:root {
     --scpu-bg: #1b1b1b;
     --scpu-border: #3d3d3d;
     --scpu-fg: #ffffff;
     color: var(--scpu-fg);
     font-size: 14px;
}
 body {
     background-color: var(--scpu-bg);
}
.tag-chip {
     display: flex;
     padding: 1rem;
     border: 1px var(--scpu-border) solid;
     min-width: max-content;
     justify-content: center;
}
.tag-cloud {
     overflow-x: none;
     overflow-y: none;
}
.tag-list {
     width: auto;
     display: grid;
     gap: 0.7rem;
     overflow-x: scroll;
     overflow-y: hidden;
     grid-template-columns: repeat(auto-fit, 1fr);
     grid-template-rows: repeat(3, 1fr);
     grid-auto-flow: column;
}

<div class="tag-cloud">
  <div class="tag-list nav-scroll">
    <span class="tag-chip">6000</span>
    <span class="tag-chip">alagadda</span>
    <span class="tag-chip">artifact</span>
    <span class="tag-chip">audio</span>
    <span class="tag-chip">biological</span>
    <span class="tag-chip">blackwood</span>
    <span class="tag-chip">_cc</span>
    <span class="tag-chip">co-authored</span>
    <span class="tag-chip">container</span>
    <span class="tag-chip">d-11424</span>
    <span class="tag-chip">daevite</span>
    <span class="tag-chip">deer-college</span>
    <span class="tag-chip">doctor-light</span>
    <span class="tag-chip">doctor-mcdoctorate</span>
    <span class="tag-chip">entropic</span>
    <span class="tag-chip">esoteric-class</span>
    <span class="tag-chip">ethics-committee</span>
    <span class="tag-chip">faeowynn-wilson</span>
    <span class="tag-chip">global-occult-coalition</span>
    <span class="tag-chip">grand-karcist-ion</span>
    <span class="tag-chip">hanged-king</span>
    <span class="tag-chip">hy-brasil</span>
    <span class="tag-chip">interactive</span>
    <span class="tag-chip">la-rue-macabre</span>
    <span class="tag-chip">_licensebox</span>
    <span class="tag-chip">meta</span>
    <span class="tag-chip">metallic</span>
    <span class="tag-chip">narrative</span>
    <span class="tag-chip">on-guard-43</span>
    <span class="tag-chip">portal</span>
    <span class="tag-chip">religious</span>
    <span class="tag-chip">ritual</span>
    <span class="tag-chip">s&amp;amp;c-plastics</span>
    <span class="tag-chip">scp</span>
    <span class="tag-chip">serpents-hand</span>
    <span class="tag-chip">spacetime</span>
    <span class="tag-chip">temporal</span>
    <span class="tag-chip">three-moons-initiative</span>
    <span class="tag-chip">three-portlands</span>
    <span class="tag-chip">wanderers-library</span>
    <span class="tag-chip">weapon</span>
    <span class="tag-chip">wilsons-wildlife</span>
    </div>
</div>

Answer 4

仅通过 CSS，您可以尝试 writing-mode 和 column CSS，最后通过 min-content/max-content 和 max-height:100%;

重置大小

请注意， Masonry Layout will be widely implemented (only FF at the time of that answer), this answer will be obsolete and 就是您要找的人。

Warning: This feature is only implemented in Firefox, and can be enabled by setting the flag layout.css.grid-template-masonry-value.enabled to true in about:config, in order to allow testing and providing of feedback.

这是实际的想法（欢迎提供有关浏览器故障的反馈）

:root {
  --scpu-bg: #1b1b1b;
  --scpu-border: #3d3d3d;
  --scpu-fg: #ffffff;
  color: var(--scpu-fg);
  font-size: 14px;
}

body {
  background-color: var(--scpu-bg);
}

.tag-chip {
  padding: 1rem;
  border: 1px var(--scpu-border) solid;
}

.tag-cloud {
  overflow-x: scroll;
  max-height: 11rem;
  padding-bottom: 1.2rem;
  display: flex;
}

.tag-list {
  column-count: 3;
  column-rule-width:0;
  writing-mode: vertical-lr;
  width: max-content;
  height: min-content;
  max-height: 100%;
  padding-right:2px;
}

.tag-chip {
  writing-mode: horizontal-tb;
  margin: 2px;
}

<div class="tag-cloud">
  <div class="tag-list nav-scroll">
    <span class="tag-chip">6000</span><span class="tag-chip">alagadda</span
    ><span class="tag-chip">artifact</span><span class="tag-chip">audio</span
    ><span class="tag-chip">biological</span
    ><span class="tag-chip">blackwood</span><span class="tag-chip">_cc</span
    ><span class="tag-chip">co-authored</span
    ><span class="tag-chip">container</span><span class="tag-chip">d-11424</span
    ><span class="tag-chip">daevite</span
    ><span class="tag-chip">deer-college</span
    ><span class="tag-chip">doctor-light</span
    ><span class="tag-chip">doctor-mcdoctorate</span
    ><span class="tag-chip">entropic</span
    ><span class="tag-chip">esoteric-class</span
    ><span class="tag-chip">ethics-committee</span
    ><span class="tag-chip">faeowynn-wilson</span
    ><span class="tag-chip">global-occult-coalition</span
    ><span class="tag-chip">grand-karcist-ion</span
    ><span class="tag-chip">hanged-king</span
    ><span class="tag-chip">hy-brasil</span
    ><span class="tag-chip">interactive</span
    ><span class="tag-chip">la-rue-macabre</span
    ><span class="tag-chip">_licensebox</span><span class="tag-chip">meta</span
    ><span class="tag-chip">metallic</span
    ><span class="tag-chip">narrative</span
    ><span class="tag-chip">on-guard-43</span
    ><span class="tag-chip">portal</span><span class="tag-chip">religious</span
    ><span class="tag-chip">ritual</span
    ><span class="tag-chip">s&amp;amp;c-plastics</span
    ><span class="tag-chip">scp</span><span class="tag-chip">serpents-hand</span
    ><span class="tag-chip">spacetime</span
    ><span class="tag-chip">temporal</span
    ><span class="tag-chip">three-moons-initiative</span
    ><span class="tag-chip">three-portlands</span
    ><span class="tag-chip">wanderers-library</span
    ><span class="tag-chip">weapon</span
    ><span class="tag-chip">wilsons-wildlife</span>
  </div>
</div>

Answer 5

您可以使用如下脚本

   <div class="tag-cloud">
  <div id="elment_flex" class="tag-list nav-scroll">
    <span class="tag-chip">6000</span><span class="tag-chip">alagadda</span
    ><span class="tag-chip">artifact</span><span class="tag-chip">audio</span
    ><span class="tag-chip">biological</span
    ><span class="tag-chip">blackwood</span><span class="tag-chip">_cc</span
    ><span class="tag-chip">co-authored</span
    ><span class="tag-chip">container</span><span class="tag-chip">d-11424</span
    ><span class="tag-chip">daevite</span
    ><span class="tag-chip">deer-college</span
    ><span class="tag-chip">doctor-light</span
    ><span class="tag-chip">doctor-mcdoctorate</span
    ><span class="tag-chip">entropic</span
    ><span class="tag-chip">esoteric-class</span
    ><span class="tag-chip">ethics-committee</span
    ><span class="tag-chip">faeowynn-wilson</span
    ><span class="tag-chip">global-occult-coalition</span
    ><span class="tag-chip">grand-karcist-ion</span
    ><span class="tag-chip">hanged-king</span
    ><span class="tag-chip">hy-brasil</span
    ><span class="tag-chip">interactive</span
    ><span class="tag-chip">la-rue-macabre</span
    ><span class="tag-chip">_licensebox</span><span class="tag-chip">meta</span
    ><span class="tag-chip">metallic</span
    ><span class="tag-chip">narrative</span
    ><span class="tag-chip">on-guard-43</span
    ><span class="tag-chip">portal</span><span class="tag-chip">religious</span
    ><span class="tag-chip">ritual</span
    ><span class="tag-chip">s&amp;amp;c-plastics</span
    ><span class="tag-chip">scp</span><span class="tag-chip">serpents-hand</span
    ><span class="tag-chip">spacetime</span
    ><span class="tag-chip">temporal</span
    ><span class="tag-chip">three-moons-initiative</span
    ><span class="tag-chip">three-portlands</span
    ><span class="tag-chip">wanderers-library</span
    ><span class="tag-chip">weapon</span
    ><span class="tag-chip">wilsons-wildlife</span>
  </div>
</div>

<script type="text/javascript" >
var flex_elm = document.getElementById('elment_flex');

 let clientWidth = Math.max(
  flex_elm.scrollWidth,
  flex_elm.offsetWidth,
  flex_elm.clientWidth
  );
var rem = parseFloat(getComputedStyle(document.documentElement).fontSize);

flex_elm.style.maxWidth = ((clientWidth/3)+rem*1*flex_elm.children.length)+"px";
flex_elm.style.width = ((clientWidth/3)+rem*1*flex_elm.children.length)+"px";


flex_elm.style.flexWrap = 'wrap';


</script>

加载页面而不换行然后根据内容设置长度，然后设置'wrap'。

Answer 6

我想知道使用纯静态 CSS“多列布局”（通常只是 column-width）是否可以帮助解决此任务并获得非常接近目标的结果，有两个注意事项.

任务回顾：

顺序很重要：标签的第一“页”应该在下一页超出视口之前被填充并可见。
标签应水平填充，在“页面”的行尾换行。
在“页面”填充给定行数后，下一个“页面”从左上角开始填充。
（警告 1！） 标签的“装配式”非对齐器右边缘或来自“对齐”文本块的（丑陋的）不均匀间距都不是问题。
当标签适合单行时，没有空的未使用的垂直 space 被保留。（不在 OP 的要求中。）

令我惊讶的是，这一切都是可能的，正如我在这个过程中了解到的那样，这正是列的用途：最大的惊喜是列宽四舍五入。

注意事项 2 我发现在某些情况下，Blink 会错误地尝试在垂直方向上平衡倒数第二列和最后一列，并“借用”前一列和最后一列的最后一行将它移到后面，尽管被告知 “按顺序填充列” 和 column-fill: auto;。在 Firefox 中不会发生这种令人惊讶的跳跃。我认为这是一个错误，但还没有进一步调查。

交互式演示：

let t, max = 123, c = 0;

onload = () => {
  for (let i = 8; i-- > 0;) addTag();
  t = setInterval(addTag, 500)
}

function addTag() {
  tags.insertAdjacentHTML(
   'beforeend',
   ` <span>${word()}</span>`
  );
  function word() {
    const dict = ['foo', 'fi', 'fa', 'bar',
    'gazonk', 'qux', 'quux'];
    const l = dict.length;
    return dict[Math.floor(Math.random() * l)]
    + '-' + dict[Math.floor(Math.random() * l)];
  };
  c++;
  if (c >= max) clearInterval(t)
}

div {
  column-width: 100vw;
  /* This will be rounded to (fraction of) 
     actual container width, so that whole number
     of columns could be viewed together. That is
     exactly what we need in this particular case
     (and probably in general). */
  column-gap: 0; /* Not default apparently. */ 
  column-rule: none; /* Change to see separators. */
  column-count: auto;  /* Default. */
  column-fill: auto;
  /* Not default 
     - this should ensure next column will be
     start filling only after previous is fully
     vertically occupied. 
     Blink does not respect this sometimes: last
     line of second-to-last column occasionaly
     jumps to last columns and back. */
  max-height: 8em; /* No calc for simplicity */
  overflow-x: scroll;
  overflow-y: hidden;
  text-align: justify;
  /* Personally, I'd rather leave it left-aligned. */
  word-spacing: .5em; /* Larger gaps between tags. */
  counter-reset: tags;
  outline: 1px solid;
}
span {
  display: inline-block;
  outline: 1px solid;
  padding: .2em;
  margin: .3em;
  white-space: nowrap;
  word-spacing: 0; /* Undo gaps. */
}
span::before {
  counter-increment: tags;
  content: counter(tags) ' '
}
.narrow-columns {
  column-width: 40vw;
  /* Again, will be rounded - to half. */
}
.rigged {
  text-align: left;
  word-spacing: 0;
  /* IMHO better. */
}

<!--
 Demo controls:
-->
<p>
  <button onclick="clearInterval(t);addTag()">Add Tag</button>
  <button onclick="tags.scrollBy({left:tags.getBoundingClientRect().width,behavior:'smooth'})">Scroll by width →</button>
  <button onclick="tags.scrollBy({left:-tags.getBoundingClientRect().width,behavior:'smooth'})">… ←</button>
|
  <button onclick="clearInterval(t);tags.innerHTML=''">Clear Tags</button>
  <label><input type="checkbox" onchange="tags.classList.toggle('narrow-columns')">Narrower Columns</label>
  <label><input type="checkbox" onchange="tags.classList.toggle('rigged')">Rigged</label>
</p>
<div id="tags">
 <!--
  Bunch of 
   <span>foo-bar</span>
  for demonstrative purposes added by JS here.
 -->
</div>

Answer 7

尽管缺少支持，masonry 网格正是您所需要的。它与 columns 布局非常相似，但较少关注“纯文本”。 columns 是您想要类似报纸的布局时所需要的，这正是您所要求的，但是是水平的。根据我的经验，它有一些非常奇怪的怪癖，比如边距不正常，以及框阴影和轮廓被切断并移到下一列的视觉故障. ' 的回答精美地展示了如何使用它。我需要更改的只是列表中的间距。 columns 得到全面支持，所以我添加了他的实现作为不支持 masonry 时的后备（它仍在开发中，从外观上看，需要一些时间才能真正落地在浏览器中。不过，我已经迫不及待想看到这篇文章过时了）。

现在回答。截至目前，如果您在 Firefox 中启用该功能，您实际上可以看到 masonry 网格在 this Fiddle 中工作。这是重要的 CSS：

{
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: masonry;
}

如 Fiddle 中所述，有一个属性会完全 CSS-only — grid-auto-flow: row;，但这不起作用（我希望现在），因为当您将 grid-template-columns 设置为 masonry 时，网格的流向隐式设置为 column。无法还原。

为了从 flex 切换到 masonry，脚本在子项上循环以检测 flexbox 中存在的行数。它通过检查它们距顶部的偏移量来实现。如果该值第 4 次进行切换，它会将适当的 grid class 添加到列表中。

来自您的评论：

As for the overflow, it would be great if each overflowing element was added to the shortest row, although it seems impossible as it differs from the behavior it had before.

masonry 实际上是自动执行的！

在溢出前将不同长度的元素包裹 X 次

Wrapping elements of varying length X times before overflowing

html

css

flexbox

reactjs

css-grid

任务回顾：

交互式演示：