有没有办法在多行flexbox中进行换行?
例如,在此笔中的每个第3项之后中断
.container {
background: tomato;
display: flex;
flex-flow: row wrap;
align-content: space-between;
justify-content: space-between;
}
.item {
width: 100px;
height: 100px;
background: gold;
border: 1px solid black;
font-size: 30px;
line-height: 100px;
text-align: center;
margin: 10px;
}
.item:nth-child(3n) {
background: silver;
}Run Code Online (Sandbox Code Playgroud)
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>Run Code Online (Sandbox Code Playgroud)
喜欢
.item:nth-child(3n){
/* line-break: after; */
}
Run Code Online (Sandbox Code Playgroud) 想象一下,我有以下标记
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
Run Code Online (Sandbox Code Playgroud)
和风格
.item {
width: 100%
}
Run Code Online (Sandbox Code Playgroud)
并且由于某些原因我无法改变宽度我可以
.item
通过.container使用flexbox或任何其他方式设置父容器,在每行中排列2个项目吗?