Javascript 设计一组5个div，使它们在大屏幕上均匀分布，在小屏幕上分成两行？

我有一个由5个方形div组成的组件，需要满足以下要求：

• 在大屏幕上，我只希望它们在一行中等距排列
• 当屏幕较大时，所有屏幕的大小应相同
• 在较小的屏幕上，2个必须在顶部，3个在底部
• 在较小的屏幕上，两行的大小必须相同，因此顶部的方块可以更大

我正试图用flexbox这样做，但无法正确定位。以下是我所拥有的一个样本：

const-App=（）=>{
返回(
内容1
内容2
内容3333
内容44
内容5
)
}
ReactDOM.render(
,
document.getElementById（'app'）
);
.container{
显示器：flex；
弯曲方向：行；
对正内容：空间均匀；
柔性包装：包装；
}
.广场集团{
显示器：flex；
对正内容：空间均匀；
}
.广场{
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
对齐内容：居中对齐；
填充：5px9px；
高度：50px；
背景颜色：蓝色；
保证金：2倍；
}
您可以去掉额外的包装器，并按如下方式操作：


const-App=（）=>{
返回(
内容1
内容2
内容3333
内容44
内容5
)
}
ReactDOM.render(
,
document.getElementById（'app'）
);
.container{
显示器：flex；
弯曲方向：行；
}
.广场{
显示器：flex；
证明内容：中心；
对齐项目：居中；
填充：5px9px；
高度：50px；
框大小：边框框；
背景颜色：蓝色；
边距：元素间边距的2×3%；/*3%*/
颜色：#fff；
最小宽度：0；
弯曲：1；/*相等宽度*/
}
@介质（最大宽度：800px）{
.集装箱{
柔性包裹：包裹；/*允许包裹*/
调整内容：居中；/*居中所有内容*/
}
/*这将分隔两条线*/
.容器：：之后{
内容：“；
顺序：1；
宽度：100%；
}
/**/
/*最后3个元素进入第二行*/
.square:n子代（n+3）{
顺序：2；
保证金：2倍；
}
/*在两边留出相等的边距，使线相等*/
.方：第n个孩子（1），
.方：第n个孩子（3）{
利润率：2×2×2×15%；
}
.方：第n个孩子（2），
.方：第n个孩子（5）{
利润率：2px 15%2px 2px；
}
}