我现在有这个:
.container {
background: gray;
width: 600px;
display: flex;
flex-flow: row wrap;
position: relative;
}
.item {
background: blue;
width: auto;
height: auto;
margin: 4px;
flex: 1;
flex-basis: 20%;
}<div class="container">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
<div class="item">D</div>
<div class="item">E</div>
<div class="item">F</div>
<div class="item">G</div>
</div>我想要做的是在flexbox中每行有5个项目.目前它们没有出现,因为它们没有设定的宽度/高度,这引出了我的下一个问题.是否可以自动调整项目大小以使其中每行适合5个项目？
我该怎么做？
谢谢!
我想在第一行显示 4 个项目，但在第二行只显示 3 个，然后在第三行显示 4 个，在第四行显示 3 个，依此类推...
我已经实现了这一点，nth-child但是代码太多而且不灵活和可扩展。
flex 可以吗？或网格？
* {
box-sizing: border-box;
}
.grid-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.grid-wrapper .grid-item {
width: 25%;
text-align: center;
padding: 5px;
}
p {
background: #ddd;
padding: 15px;
}<div class="grid-wrapper">
<div class="grid-item">
<p>Grid Item</p>
</div>
<div class="grid-item">
<p>Grid Item</p>
</div>
<div class="grid-item">
<p>Grid Item</p>
</div>
<div class="grid-item">
<p>Grid Item</p>
</div>
<div class="grid-item">
<p>Grid Item</p>
</div>
<div class="grid-item">
<p>Grid Item</p>
</div>
<div class="grid-item">
<p>Grid …