我正在使用指令在angular / js应用程序上工作,这个特定的flex-container使用了divs(指令),它可能包含一个或多个项目。当一个指令包含3个用于flexbox的项目时,如果它不能完全适合该指令中的所有项目,则将整个行向下推,而不是说将第一行放在第一行,将其余行放在第二行。相反,它将在顶部保留一个空白空间并将所有3推到第二行。在这种情况下,使用指令的原因是要重用并将共同的功能分组在一起。
为简化起见,这演示了我在使用div时遇到的问题。查看示例,如果您调整窗口的大小,您将看到,如果没有足够的空间容纳第6个气泡,该div中的所有3个将被推送到第二行。 example on codepen
dl,
dt,
dd {
/* resetting definition list styling */
margin: 0;
padding: 0;
}
.bubble {
display: block;
border-radius: 1rem;
background: rgb(52, 58, 64);
color: rgb(255, 255, 255);
text-align: center;
font-weight: 600;
padding: 1rem;
width: 10rem;
height: 10rem;
}
.flex-container {
display: inline-flex;
flex-wrap: wrap;
}
.flex-container div {
display: inline-flex;
}
<div class="flex-container">
<div>
<dl class="bubble">1</dl>
</div>
<div>
<dl class="bubble">2</dl>
</div>
<div>
<dl class="bubble">3</dl>
</div>
<div>
<dl class="bubble">4</dl>
<dl class="bubble">5</dl>
<dl class="bubble">6</dl>
</div>
</div>
我是否可以在第三个气泡之后使包含3个项目的div开始,并只包装那些不适合第二行的项目?
答案 0 :(得分:0)
更新:
使用
.flex-container div {
display: contents;
}
代替
.flex-container div {
display: inline-flex;
}
答案 1 :(得分:0)
在这里显示Roya的建议可以解决问题...
dl, dt, dd {
/* resetting definition list styling */
margin: 0;
padding: 0;
}
.bubble {
display: block;
border-radius: 1rem;
background: rgb(52, 58, 64);
color: rgb(255, 255, 255);
text-align: center;
font-weight: 600;
padding: 1rem;
width: 10rem;
height: 10rem;
margin-right: 2rem;
margin-top: 1rem;
}
.flex-container {
display: inline-flex;
flex-wrap: wrap;
}
.flex-container div {
display: contents;
}
<div class="flex-container">
<div><dl class="bubble">1</dl></div>
<div><dl class="bubble">2</dl></div>
<div><dl class="bubble">3</dl></div>
<div><dl class="bubble">4</dl></div>
<div>
<dl class="bubble">5</dl>
<dl class="bubble">6</dl>
<dl class="bubble">7</dl>
</div>
</div>