Html 带5个盒子的flexbox

我正在尝试使用flexbox实现以下布局

我已经在网格中尝试过了，它按预期工作。但它在IE中不起作用，所以我想切换到flexbox，下面是我的grid和flex版本

网格代码如下：

//这是一个网格css
.grid_容器{
宽度：65%；
利润率：10px自动；
显示：网格；
网格间距：1.5雷姆；
网格模板柱：1fr 1fr 1fr；
最大宽度：1100px；
显示：-ms网格；
-ms网格柱：1fr 1fr 1fr；
-ms网格行间距：1.5rem；
-ms网格柱间距：1.5rem；
}
//这是使用网格css
.盒式物品{
宽度：100%；
高度：自动；
位置：相对位置；
}
//内部图像css
.盒子项目img{
最大宽度：100%；
最大高度：100%；
垂直对齐：底部对齐；
}
.方框文本{
位置：绝对位置；
底部：12px；
左：0；
右：0；
宽度：100%；
文本对齐：居中；
字体大小：1.3rem；
字体大小：400；
颜色：白色；
}

虚拟文本
虚拟文本
虚拟文本
虚拟文本
虚拟文本

对于您的主容器：

.main-container {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
}

.item {
    flex-basis: 30%;
}

然后您的项目：

.main-container {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
}

.item {
    flex-basis: 30%;
}

---

css网格在IE 11和IE 13中只得到部分支持。这是否回答了您的问题？嗨@tacoshy，我最近意识到了这一点，所以现在我想用flexbox实现同样的效果。你知道如何使用flex实现图中所示的相同布局吗？请在这里解释更改的内容和原因。问题是如何以特定的方式在flex容器中放置5个盒子，在我的回答中，我显示了如何操作的代码，我没有更改，只是给出了一个示例。不过，你可以解释每个部分的功能，所以其他人可以从中学习。现在，这只是一个复制粘贴的答案。我认为这是非常不言自明的，在flex项中添加一个

basis

属性，并用

flex wrap

包装主容器，这对您来说很清楚，但是如果有人搜索相同的问题，在这里结束并看到这个问题，可能是他/她需要更多的上下文。通过解释，你的答案的质量要高得多。