Question

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

Box11与Box 01的宽度相同
Box12与Box 02的宽度相同
但是第13栏要占宽=第03栏+第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

尝试在框13中添加flex: 2;。这将使其与框3和4一样大

Answer 2

删除不必要的div并更改以下CSS属性

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

.container { padding: 20px 0;}

.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;flex: 2}

<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 third button-box">
      Box 13
      <button>Button 1</button>
    </div>
  </div>
</div>

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

2 个答案: