Html Flexbox修改flex项属性以将一项堆叠在另一项之上
我必须实现下面的布局。使用react，我试图使用flexbox创建一个通用库组件。所以我迭代了一个包含图像细节的对象，比如src、width和height 我创建了这个代码笔——试图复制这个问题 有一个宽度为1100px的外部容器和一个宽度为Html Flexbox修改flex项属性以将一项堆叠在另一项之上,html,css,flexbox,Html,Css,Flexbox,我必须实现下面的布局。使用react，我试图使用flexbox创建一个通用库组件。所以我迭代了一个包含图像细节的对象，比如src、width和height 我创建了这个代码笔——试图复制这个问题 有一个宽度为1100px的外部容器和一个宽度为flex-wrap:wrap的柔性容器 通过只向flex项添加属性而不使用任何额外的div将其包装，是否可以像所示的布局那样堆叠IMG 1和IMG 2 我不需要任何额外的包装器div，因为我正在尝试创建一个通用的可重用React组件 谢谢。正如前面有人提到
flex-wrap:wrap谢谢。正如前面有人提到的，如果您不想在图像1和图像2周围使用包装器div，就需要使用CSS网格 这是因为FlexBox在技术上只是一个1D布局工具，所以在需要改变流动方向的情况下，会遇到类似的问题 CSS网格更适合于需要在2D中改变布局的情况。这里有一个很好的例子： 下面是一个快速示例，它实现了您想要的功能，而无需将前两个框包装到它们自己的div中
.outer{
背景：浅灰色；
宽度：1100px；
}
.内部{
显示：网格；
柔性包装：包装；
}
.a{
网格柱：1；
网格行：1/span 1；
}
.b{
网格柱：1；
网格行：2/跨1；
}
c{
网格柱：2；
网格行：1/2跨；
}
博士{
网格柱：3；
网格行：1/2跨；
}
e{
网格柱：4；
网格行：1/2跨；
}
275x182
275x182
275x365
275x365
275x365
275x400
275x400
275x400