Html 需要使用css flexbox生成行-列-行

我想使用css flexbox制作行-列-行布局，代码如下：

*{
填充：0；
保证金：0；
框大小：边框框；
}
.集装箱{
显示器：flex；
柔性包装：包装；
差距：0.2%；
}
.盒子{
颜色：白色；
背景：皇家蓝；
最小高度：100px；
最小宽度：100px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
边框：1px实心；
}
.b1{
弹性：1080%；
}
.b2{
flex:1自动；
}
.b3{
弹性：10100%；
}

1.
2.
3.

使用媒体查询的基于网格的方法：

*{
填充：0；
保证金：0；
框大小：边框框；
}
.集装箱{
显示：网格；
网格模板柱：4fr 1fr；
网格自动行：最小最大值（100px，自动）；
网格模板区域：
“b1 b2”
“b3 b2”；
差距：0.2%；
}
@媒体屏幕和屏幕（最大宽度：480px）{
.集装箱{
网格模板列：1fr；
网格模板区域：
“b1”
“b2”
“b3”；
}
}
.盒子{
颜色：白色；
背景：皇家蓝；
最小高度：100px；
最小宽度：100px；
边框：1px实心；
}
.b1{
网格面积：b1；
}
.b2{
网格面积：b2；
}
.b3{
网格面积：b3；
}

1.
2.
3.

为什么不改用CSS网格？CSS网格在这种情况下会有帮助吗？就像我想在手机上的1和3之间浮动第二列，那么有可能吗？请把你的代码放在这里的问题中，而不是放在一个外部代码站点上。使用一个片段（编辑您的问题，然后单击类似于

）的图标。@connexo done..谢谢。