Html 在flex布局的行/列中，仅使用CSS沿横轴堆叠某些项目

在某一点上，我曾考虑过一个CSS规范的建议，但后来我发现可能已经有一个解决方案我错过了。我所说的布局示例如下所示：

+-----------+---+
|     1     | 6 |
+---+---+---+   |
| 2 | 3 | 4 +---+
+---+---+---+ 7 |
|     5     |   |
+-----------+---+

问题是左边柱中间的三个盒子是沿着十字轴堆叠的，而我在CSS中找不到这样的机制。我知道这可以通过在这3个项目（行方向灵活布局）周围缠绕一个div来实现，但这种方法破坏了灵活布局的灵活性，因为这些项目不能再围绕外部布局重新排序，它们之间也不能再发生列/行中断。那么，如何仅使用CSS实现这一点，从而使flex布局保持灵活

HTML:

---

使用多个flex容器会更容易

但如果您想要一个单独的容器，您仍然可以使用以下假设：

• 6和7的宽度是已知的
• 已知2、3和4的高度

那么，你可以

• 使用行布局

  ┌─┬─┬─┬─┬─┬─┬─┐
  │1.│2.│3.│4.│5.│6.│7.│
  └─┴─┴─┴─┴─┴─┴─┘
  

• 对弹性项目重新排序：1,6,2,3,4,5,7

  ┌─┬─┬─┬─┬─┬─┬─┐
  │1.│6.│2.│3.│4.│5.│7.│
  └─┴─┴─┴─┴─┴─┴─┘
  

• 允许使用

  flex wrap:wrap

  换行

• 使用伪元素在2之前和4之后强制换行

  ┌─┬─┐
  │1.│6.│
  ├─┼─┼─┐
  │2.│3.│4.│
  ├─┼─┼─┘
  │5.│7.│
  └─┴─┘
  

• 在6和7上使用flex-grow:0。在另一个上使用flex-grow:1

  ┌─────────┬─┐
  │    1.│6.│
  ├───┬───┬─┴─┤
  │ 2.│ 3.│ 4.│
  ├───┴───┴─┬─┤
  │    5.│7.│
  └─────────┴─┘
  

• 使用，

  w

  将所需的值设置为6和7。将

  右边距：w

  添加到4

  ┌─────┬───┐
  │  1.│ 6.│
  ├─┬─┬─┼───┘
  │2.│3.│4.│
  ├─┴─┴─┼───┐
  │  5.│ 7.│
  └─────┴───┘
  

• 将所需高度

  h

  设置为2、3和4。将

  页边距底部：-h/2

  添加到6，将

  页边距顶部：-h/2

  添加到7

  ┌─────┬───┐
  │  1.│ 6.│
  ├─┬─┬─┤   │
  │2.│3.│4.├───┤
  ├─┴─┴─┤ 7.│
  │  5.│   │
  └─────┴───┘
  

• 此外，将

  宽度

  或

  最大宽度

  添加到2,3,4可能是个好主意。否则，如果它们的内容足够宽，它们将被放置在不同的行中，从而破坏布局

代码如下：

#柔性布局{
显示：flex；/*魔术开始*/
柔性换行：换行；/*多行*/
}
#item1{顺序：1；}
#项目6{顺序：2；}
#第2项{顺序：3；}
#项目3{顺序：4；}
#项目4{顺序：5；}
#项目5{顺序：6；}
#项目7{顺序：7；}
#弹性布局>分区{
边框：1px实心；
框大小：边框框；
}
#第二项、第三项、第四项{
高度：50px；/*h*/
}
#项目6{
余量底部：-25px；/*-h/2*/
}
#项目7{
余量顶部：-25px；/*-h/2*/
}
#第1项、第2项、第3项、第4项、第5项{
柔性生长：1；
}
#第6项#第7项{
宽度：25%；/*w*/
flex-grow:0；
}
#项目4{
右边距：25%；/*w*/
}
#柔性布局：之前{
/*在第2项之前强制换行*/
内容：''；
宽度：100%；
顺序：3；
}
#弹性布局：之后{
/*第4项后强制换行*/
内容：''；
宽度：100%；
顺序：5；
}

1.
2.
3.
4.
5.
6.
7.

我的解决方案使用绝对位置

#柔性布局{
边框：4个实心番茄；
宽度：100%；
显示器：flex；
柔性流：行换行；
位置：相对位置；
最小宽度：200px；
}
#弹性布局分区{
框大小：边框框；
边框：4倍纯白；
背景：ddd；
填充：1em；
文本对齐：居中；
弹性：01.25%；
}
#柔性布局#项目1{
弹性：0175%；
右边距：25%；
}
#柔性布局#第5项{
弹性：0175%；
}
#柔性布局#第6项{
宽度：25%；高度：50%；
位置：绝对位置；
顶部：0；右侧：0；
}
#柔性布局#第7项{
宽度：25%；高度：50%；
位置：绝对位置；
顶部：50%；右侧：0；
}

1.
2.
3.
4.
5.
6.
7.

如果现在有人碰巧在几天内遇到这种情况，实现这种布局的一种不太老练的方法是使用较新的网格布局系统。网格更适合这种布局，而flex更适合将项目分布在单个行/列中（包括垂直居中元素），或者当项目沿flex轴的大小不一致时，跨多个行/列将它们彼此对齐不成问题

#网格布局{
显示：网格；
网格间距：1米；
/*4列，每列25%宽度-网格间隙为em的3/4*/
网格模板列：重复（4，计算（25%-（3em/4））；
网格模板行：10em 4.5em 4.5em 10em；
}
#网格布局>分区{
边框：实心1px黑色；
填充：.5em；
}
#项目1{网格区域：1/1/span 1/span 3；}
#项目2{网格区域：2/1/span 2/span 1；}
#项目3{网格区域：2/2/span 2/span 1；}
#项目4{网格区域：2/3/span 2/span 1；}
#项目5{网格区域：4/1/span 1/span 3；}
#项目6{网格区域：1/4/span 2/span 1；}
#第7项{网格区域：3/4/span 2/span 1；}

1.
2.
3.
4.
5.
6.
7.

你能展示一下到目前为止你写的东西吗？那只是一个假设案例的模型，但我为它添加了一些代码。如果你不介意将6和7放在另一个flex容器中，你可以使用l行

<div id="flex-layout">
<div id="item1">1</div>
<div id="item2">2</div>
<div id="item3">3</div>
<div id="item4">4</div>
<div id="item5">5</div>
<div id="item6">6</div>
<div id="item7">7</div>
</div>

#flex-layout {
    display: flex;
    flex-direction: column;
    height: 300px;
    width: 400px;
    flex-wrap: wrap;
    align-items: stretch;
}

#item1 {
    flex: 0 0 100px;
    width: 300px;
}

#item2 {
    flex: 0 0 100px;
    width: 100px;
}

#item3 {
    flex: 0 0 100px;
    width: 100px;
}

#item4 {
    flex: 0 0 100px;
    width: 100px;
}

#item5 {
    flex: 0 0 100px;
}

#item6 {
    flex: 0 0 150px;
    width: 100px;
}

#item7 {
    flex: 0 0 150px;
}