's分隔成列。
我有以下的例子HTML:
<div class="vini">
<!-- div of class "vino" can be 1 or also 100 times rendered, one below another just like this: -->
<div class="vino">
<div class="vino">
<div class="vino">
<div class="vino">
</div>
我正在努力实现以下目标:
PC场景:所有的<div class="vino">应该以某种方式调整为始终只显示这些divs中的3个一行(从左到右)。然后，在下一行中，应该有下3个divs，以此类推，直到没有剩余。
移动端场景:所有的<div class="vino">应该在另一个下面可见-使它们从上到下可滚动，直到没有更多的divs显示。
我试着玩周围的display: flexCSS属性，但我不能得到它完成。
理想情况下，我想通过CSS和HTML(没有JS)来完成这项工作。
请问你知道我该怎么做吗?谢谢。
下面的样式会让你更接近你需要的。
.vini样式会使这个容器和它的子元素变成flexxed items。
.vino样式将使项目占用100%的宽度然后在屏幕宽度:768px，将使它们占用32%的宽度给他们一点喘息的空间(100/3 = 33.3%的重复)
.vini {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.vino {
flex: 0 0 100%;
max-width: 100%;
}
@media(min-width: 768px) {
.vino {
flex:0 0 32%;
max-width:32%;
}
}