数据不断变化的flexbox订单

Question

我的工作任务艰巨-需要一个纯CSS解决方案

我收到了一系列宽度为33％或66％宽度的小部件。需要按照接收顺序对其进行排序，但是小部件的总宽度不能超过100％。

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

我该如何使用flex？页面加载时，我得到了组件列表。

Answer 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>