具有单个容器和不同大小元素的 CSS flexbox

Question

我正在尝试实现此定位概述的以下场景的 flexbox

+----+----------+----+
|   1|2>        |  <3|
+----+----------+----+
|   4|5              |
|   v|v              |
+----+               |
     |               |
+----+------+--------+
|7>         |      <6|
+-----------+--------+

解释

• 上面的每个 flex 元素都有其订单号
• 数字根据最终结果对齐(垂直和水平)
• 带数字的元素只有预定义的宽度
• <>v根据内容的数量显示元素的维度灵 active ；
  • >内容将向右延伸
  • <内容将向左拉伸(stretch)
  • v内容会向下延伸
• 1 固定宽高
• 1、2 和 3 的高度相同，但 2 和 3 的宽度可变
• 4 和 5 已定义宽度但高度不同
• 6和7的高度相同但宽度不同
• 元素编号对应于它们在 HTML 中的位置
• 请注意，与 HTML 相比，6 和 7 在输出中是相反的

问题

主要问题是所有元素都在同一个 flex 容器中。因此，我在正确的位置将它们换行(换行)时遇到问题，即元素应该在元素 3 之后换行，而元素 2 和 3 必须延伸到整行，因此元素 3 可以完全在其右侧显示内容。

Here a working JSFiddle使用您可以处理的初始 HTML 和 CSS。

一些想法

也许只是出于我的想法。通过使用 :before 可以在 flexbox 容器中使用两个额外的元素和 :after并给他们适当的秩序。通过这种方式，可以模拟一些额外的内容以获得所需的结果。

如果有 flex 组会容易得多，因为可以更改 flex-direction至 column并将几个元素组合在一起:1&2&3、4&5 和 6&7 并将它们定位在 row 中在具有适当宽度的 flex 组内。

Answer 1

我设法通过使用 flex-basis 实现了预期的结果。当第 1、2、3 和 4 项的基数均为 26% 时，第 4 项不再适合第一行。同样的事情可以应用于第二行。

然后 flex-grow 可以应用于第 2、3、5、6 和 7 项以填充每行中的剩余空间。

最后 align-self 第 4 个元素，所以它不使用与第 5 个元素相同的高度。

更新的 JSFiddle:http://jsfiddle.net/ojmghu3t/2/

更新:当然你也可以用flex-basis指定px。但这样就很难在正确的位置产生中断。

这是第 1 项和第 4 项具有固定值的 JSFiddle:http://jsfiddle.net/ojmghu3t/4/