Html 如何在不引入新的空白div的情况下更正UI？

下面是我使用

Flexbox

管理div的代码。为了匹配UI，我放置了一个伪空白div，以便第二行项目与上面的项目正确匹配

• 框11的宽度与框01相同
• 框12的宽度与框02相同
• 但框13的宽度=框03+框04
• 第13框内的项目应右对齐

让我知道我是否可以在不引入虚拟div的情况下实现这一点，或者是否有更干净或更好的方法来实现这一点

代码-

.container{padding:20px 0；}
.错误{边框：5px纯红色；}
.correct{边框：5px纯绿色；}
.row{display:flex；padding:01%；margin-bottom:10px；}
.box{flex:1；边距：0.1%；边框：1px实木；}
.按钮框{显示：柔性；柔性方向：行反向；}

错误的用户界面

这是一个测试箱01
这是一个测试箱02
这是一个测试箱
这是一个测试箱04
这是一个测试箱11
这是一个测试箱12
方框13
按钮1
正确的用户界面-附加分区的bcoz

这是一个测试箱01
这是一个测试箱02
这是一个测试箱
这是一个测试箱04
这是一个测试箱11
这是一个测试箱12
方框13
按钮1

尝试添加

flex:2至框13。这将使其与框3和框4一样大
删除不必要的
div
，并更改以下css属性

.button-box { display: flex; flex-direction: row-reverse;flex: 2}


.container{padding:20px 0；}
.correct{边框：5px纯绿色；}
.row{display:flex；padding:01%；margin-bottom:10px；}
.box{flex:1；边距：0.1%；边框：1px实木；}
.按钮框{显示：柔性；柔性方向：行反向；柔性：2}

这是一个测试箱01
这是一个测试箱02
这是一个测试箱
这是一个测试箱04
这是一个测试箱11
这是一个测试箱12
方框13
按钮1
你能把你现在得到的东西和你想做的事情贴出来吗，谢谢……用
边框
和
边距
它不会对齐。