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

Question

以下是我使用 Flexbox 管理 div 的代码。为了匹配 UI，我放置了一个虚拟的空白 div，以便第二行元素与上面的元素正确匹配。

• Box11 与 Box 01 的宽度相同
• Box12 的宽度与 Box 02 相同
• 但是 Box 13 取宽度 = Box 03 + Box 04
• Box13 中的元素应右对齐。

请告诉我是否可以在不引入虚拟 div 的情况下实现此目的，或者是否有任何更清洁或更好的方法？

代码-

.container { padding: 20px 0;}

.wrong { border: 5px solid red;}
.correct { border: 5px solid green;}

.row { display: flex; padding: 0 1%; margin-bottom: 10px; }

.box { flex: 1; margin: 0 1%; border: 1px solid teal;}

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

<p>WRONG UI</p>
<div class="container wrong">
  <div class="row">
    <div class="box first">This is a test Box 01</div>
    <div class="box second">This is a test Box 02</div>
    <div class="box third">This is a test Box 03</div>
    <div class="box forth">This is a test Box 04</div>
  </div>
  <div class="row">
    <div class="box first">This is a test Box 11</div>
    <div class="box second">This is a test Box 12</div>
    <div class="box third button-box">
      Box 13
      <button>Button 1</button>
    </div>
  </div>
</div>

<p>CORRECT UI - bcoz of additional div</p>

<div class="container correct">
  <div class="row">
    <div class="box first">This is a test Box 01</div>
    <div class="box second">This is a test Box 02</div>
    <div class="box third">This is a test Box 03</div>
    <div class="box forth">This is a test Box 04</div>
  </div>
  <div class="row">
    <div class="box first">This is a test Box 11</div>
    <div class="box second">This is a test Box 12</div>
    <div class="box second"></div>
    <div class="box third button-box">
      Box 13
      <button>Button 1</button>
    </div>
  </div>
</div>

Answer 1

尝试将 flex: 2; 添加到方框 13。这将使它与方框 3 和 4 一样大