具有变化数据的弹性盒订单答案

【问题标题】：flexbox order with a changing data具有变化数据的弹性盒订单
【发布时间】：2019-06-20 09:13:19
【问题描述】：

我在工作中有一项具有挑战性的任务 - 这需要纯 CSS 解决方案

我收到一组宽度为 33% 或 66% 的小部件。它们需要按照收到的顺序订购，但小部件的总宽度不能超过 100%。

下面的屏幕截图描述了项目应填满屏幕的顺序，但数字表示收到它们的顺序。请注意，第 3 项太大，无法在第 2 项之后放入，因此第 4 项（优先级较低）填充了顶部的空白空间

我如何使用 flex 来做到这一点？页面加载时我得到组件列表。

【问题讨论】：

有东西告诉 4 回过头来使用 2 之后的空闲空间。那是什么？
这就是挑战。目前我正在按照 flexbox 收到的顺序渲染它们。这使得 1,2 并排出现，然后在顶部留下一个丑陋的间隙，因为 3 无法放入。4 出现在 3 之后，但我试图让它填补上面可以放入的空白间隙
但是自然的 flexbox 布局不会回填未占用的空间。有一个人工命令在起作用。
您的意思是这样的，您可以控制元素本身的顺序吗？ jsfiddle.net/ewxcymgu
可能重复：stackoverflow.com/q/55344983/8620333

标签： css flexbox

【解决方案1】：

你不能用 flexbox 做到这一点。

CSS-Grid 可以。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: dense;
  grid-gap: .25em;
  padding: .25em;
}

.container div {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  background: rebeccapurple;
  font-size: 2em;
  width: 100%;
}

.span-2 {
  grid-column: span 2
}

<div class="container">
  <div>1</div>
  <div>2</div>
  <div class="span-2">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
</div>

【讨论】：