Html 如何使用CSS flexbox正确对齐项目

我试图在我的代码中实现以下设计。我想使整个页面响应，并在必要时设置断点。所以，我想，使用CSS flexbox实现这一点会很好。我是flexbox的新手，所以任何帮助都将非常感谢。因此，在我的“section-two_uuumain”div中，我有项目编号和名称。我想把这些项目像表格一样显示（如下图所示）。我可以使用css-order属性，但在缩小页面时，我又一次直接失去了响应能力。如果可能的话，有人能给我指点迷津吗？如何实现设计并保持响应性？至少在设置断点之前，是否可以调整设计，以便在页面收缩时，项目保持与实际设计相同？如果可能的话，我想使用css flex box。提前谢谢。 我希望实现的设计：

这是我到目前为止尝试过的代码：

.wrapper{
显示器：flex；
弯曲方向：立柱；
}
.第一节{
背景颜色：灰色；
宽度：95%；
保证金：0自动；
}
.第二节{
背景色：白色；
宽度：95%；
保证金：0自动；
边缘顶部：10px；
}
.第二节\uuuu标题{
背景色：暗灰色；
}
.第二节页脚{
背景色：暗灰色；
}
.第二段主管道{
背景色：白色；
宽度：70%；
显示器：flex；
弯曲方向：立柱；
保证金：0自动；
}
.姓名{
边框：1个点；
}
.号码{
边框：1px虚线；
}

第一节
第二节标题
1.
一个
2.
两个
3.
三
4.
四
5.
五
6.
六
7.
七
8.
八
9
九
10
十
11
十一
12
十二
第二节页脚

您可以使用flexbox yes，但要简化HTML和CSS，如下所示：

HTML

---

您可以使用flexbox yes，但要简化HTML和CSS，如下所示：

HTML

文件
.包装纸{
显示器：flex；
弯曲方向：立柱；
}
.姓名{
边框：1个点；
宽度：8.3vw；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.号码{
边框：1px虚线；
宽度：8.3vw；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
奥本先生{
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
安顿先生{
显示器：flex；
}
一,

二,

三,

四,

五,

六,

七,

八,

九,

十,

十一,

十二,

一个

两个

三

四

十二,

十二,

十二,

十二,

十二,

十二,

十二,

十二,

文件
.包装纸{
显示器：flex；
弯曲方向：立柱；
}
.姓名{
边框：1个点；
宽度：8.3vw；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.号码{
边框：1px虚线；
宽度：8.3vw；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
奥本先生{
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
安顿先生{
显示器：flex；
}
一,

二,

三,

四,

五,

六,

七,

八,

九,

十,

十一,

十二,

一个

两个

三

四

十二,

十二,

十二,

十二,

十二,

十二,

十二,

十二,

我知道你是

<div class="container"> <!-- this is the master container -->
  <div class="sub-container">
    <span>one</span>
    <span>1</span>
  </div>
    <div class="sub-container">
    <span>one</span>
    <span>1</span>
  </div>
    <div class="sub-container">
    <span>one</span>
    <span>1</span>
  </div>
    <div class="sub-container">
    <span>one</span>
    <span>1</span>
  </div>
    <div class="sub-container">
    <span>one</span>
    <span>1</span>
  </div>
    <div class="sub-container">
    <span>one</span>
    <span>1</span>
  </div>
    <div class="sub-container">
    <span>one</span>
    <span>1</span>
  </div>
    <div class="sub-container">
    <span>one</span>
    <span>1</span>
  </div>
    <div class="sub-container">
    <span>one</span>
    <span>1</span>
  </div>  <div class="sub-container">
    <span>one</span>
    <span>1</span>
  </div>
</div>

.container {  /* seting ths master container to flex display creates a flexbox display with these DEFAULT values already built-in : flex-direction:row; */
  display:flex;
}

.sub-container { /* same here flexbox, but we change to vertical flexbox with flex-direction:column; and we add align and justify to center to it aligns nicely centered in both axis X and Y */
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
 border:1px solid black; /* this is your external border */
}

span {
  margin:2px; /*this spaces things out a bit more nicely */
}

span:nth-child(2) { /* the nth-child() selector with (2) will select every SECOND 'span' element and give it a border-top */
  border-top:1px solid black;width:100%;text-align:center; /* also we align the content of the second span and give it a full-width so that t he border-top is the full width of the sub-container */
}