以下是我使用Flexbox
管理div的代码。为了匹配UI,我放置了一个空白的div,以便第二行项目与上面的项目正确匹配。
让我知道我是否可以在不引入虚拟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>
答案 0 :(得分:2)
尝试在框13中添加flex: 2;
。这将使其与框3和4一样大
答案 1 :(得分:1)
删除不必要的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>