Css 如何使用flex显示此特定架构？

代码：

箱
文本1A
文本2a
text3a
text4a
text1b
text2b
text3b
text4b
.包装纸{
填充：10px；
背景：白色；
}
.集装箱{
填充：10px；
背景：黑色；
}
.box{
背景：红色；
}
.test1a{
背景：绿色；
}
.text1a{
背景：蓝色；
}
.text2a{
背景：红色；
}
.text3a{
背景：黄色；
}
.text4a{
背景：橙色；
}
.test1b{
背景：蓝色；
}
.text1b{
背景：绿色；
}
.text2b{
背景：红色；
}
.text3b{
背景：黄色；
}
.text4b{
背景：橙色；
}

• 小提琴-

所以我想用flexbox实现这一点。重要的是，text1a应该和text1b一样宽，以此类推——text2a和text2b等等（每次文本的长度都不同）

当缩小（窗口）时，它们应该从一行变到另一列

---

“框”文本和所有其他文本应位于其正方形的中心。正方形应该延伸到所有可用的位置。

我将类

文本框添加到所有文本框中，制作文本框容器（
.test1a
和
.test1b
）柔性框，允许孩子们（使用类
文本框
）包装在框中（
柔性包装：包装
），使文本框与flex:1的宽度相等，基本上就是这样。只需在特定断点处将flex方向更改为column，您的布局就可以移动了


例如，我建议学习css技巧。
我在所有文本框中添加了类
textbox
，制作了文本框容器（
.test1a
和
.test1b
）flexbox，允许孩子们（使用类
textbox
）包装在框中（
flex wrap:wrap
），使文本框与flex:1的宽度相等，基本上就是这样。只需在特定断点处将flex方向更改为column，您的布局就可以移动了


例如，我建议学习css技巧。
谢谢-这正是我想要的。干得好@Paul。只是提醒一下：在.container中有一个输入错误：
backgorund:black谢谢-这正是我想要的。干得好@Paul。只是提醒一下：在.container中有一个输入错误：
backgorund:black
<div class="wrapper">
    <div class="container">
        <div class="box">box</div>
        <div class="test1a">
            <div class="text1a">text1a</div>
            <div class="text2a">text2a</div>
            <div class="text3a">text3a</div>
            <div class="text4a">text4a</div>
        </div>
        <div class="test1b">
            <div class="text1b">text1b</div>
            <div class="text2b">text2b</div>
            <div class="text3b">text3b</div>
            <div class="text4b">text4b</div>
        </div>
    </div>
</div>

.wrapper {
  padding:10px;
  background:white;
}

.container {
  padding:10px;
  backgorund:black;
}

.box { 
  background:red;
}

.test1a { 
  background:green;
}

.text1a {
  background:blue;
}

.text2a {
  background:red;
}

.text3a {
  background:yellow;
}

.text4a {
  background:orange;
}

.test1b { 
  background:blue;
 }

.text1b { 
  background:green;
}

.text2b { 
  background:red;
}

.text3b {
  background:yellow;
}

.text4b { 
  background:orange;
}