Html 将flex项目放在flex box容器中的另一个flex项目下

在本例中，我希望将

2.5

放在

2

下面，但flexbox容器强制将其放在同一行，而不是将其放在已经按特定顺序排列的div下面

如何使用flexbox-将包含2.5的div放在包含2的div下-给定此html

我曾试图在ie中使用网格实现这一点，但由于ie中不完全支持网格，所以我无法做到这一点。。这就是为什么我想看看我是否可以只为ie做这件事

代码笔：

.flex容器{
显示器：flex；
}
.项目-1{
顺序：1；
背景色：rgba（200520266.75）；
边框颜色：#B4；
宽度：50px；
}
.项目-2{
顺序：2；
背景色：rgba（145223,0,75）；
边框颜色：透明；
宽度：50px；
}
.项目-3{
顺序：3；
背景色：rgba（145520,0,75）；
宽度：50px；
}
.项目-4{
顺序：4；
背景色：rgba（0,0,0,25）；
边框颜色：透明；
宽度：50px；
}
.项目2一半{
顺序：2；
背景色：rgb（20100255）；
边框颜色：透明；
宽度：50px；
}

1.
2.
2.5
3.
4.

我在

item-2

div中添加了

item2half

.flex容器{
显示器：flex；
}
.项目-1{
顺序：1；
背景色：rgba（200520266.75）；
边框颜色：#B4；
宽度：50px；
}
.项目-2{
顺序：2；
背景色：rgba（145223,0,75）；
边框颜色：透明；
宽度：50px；
}
.项目-3{
顺序：3；
背景色：rgba（145520,0,75）；
宽度：50px；
}
.项目-4{
顺序：4；
背景色：rgba（0,0,0,25）；
边框颜色：透明；
宽度：50px；
}
.项目2一半{
顺序：2；
背景色：rgb（20100255）；
边框颜色：透明；
宽度：50px；
}

1.
2.
2.5
3.
4.

以下是我如何理解您的需求：

• 项目2.5必须位于项目2下方
• 无法使用网格，只能使用flexbox
• 无法更改HTML

这里有一个解决方案：

• 您的flex项目的长度为50像素
• 你每排需要4个
• 因此，不要以像素为单位定义项目宽度，而是将容器设置为

  宽度：200px

  ，将项目设置为

  宽度：25%

  （属于

  弹性基准：25%

  ）
• 现在您可以包装这些项目了。将容器设置为

  wrap

• 创建一个伪元素作为第六项
• 此项目将是透明的，并占用项目1下的空间
• 使用

  order

  属性确保项目2.5位于最后位置

.flex容器{
显示器：flex；
柔性包装：包装；
宽度：200px；
}
.项目-1{
弹性：0.25%；
顺序：1；
背景色：rgba（200520266,0.75）；
}
.项目-2{
弹性：0.25%；
顺序：2；
背景色：rgba（145,223,0,0.75）；
}
.项目-3{
弹性：0.25%；
顺序：3；
背景色：rgba（145520,0,0.75）；
}
.项目-4{
弹性：0.25%；
顺序：4；
背景色：rgba（0,0,0,0.25）；
}
.flex容器：：之后{
弹性：0.25%；
顺序：5；
背景色：透明；
内容：“；
}
.项目2一半{
弹性：0.25%；
顺序：6；
背景色：浅绿色；
}

1.
2.
3.
2.5
4.

尝试在

item-2

中添加

item2half

，divFlexbox不允许您将元素堆叠在与

flex direction

配置的方向不同的方向上。请解释您试图实现的目标的真正目的，以便我们能够提供更好的方法建议。我曾试图在ie中使用网格实现这一点，但由于ie中不完全支持网格，因此无法做到这一点。。这就是为什么我想看看我是否可以只为ie做这个…问题是“…给定这个html”。如果您可以更改html，那么解决方案很简单。