相邻选择器非常适合用于在例如卡片设计中获取元素之间的边距。但是在制作响应式元素时如何使用 flexbox 保持相同的设计。这似乎只删除了第一个元素的边距,而不是每行的第一个元素。这个问题有什么优雅的解决方案吗?理想情况下,当 8 个元素都在一行或 4 行时,它们看起来是一样的。
.container {
display: flex;
flex-wrap: wrap;
}
.card {
height: 250px;
width: 250px;
background-color: blue;
}
.card+.card {
margin-left: 10px;
}
<div class="container">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
jsbin 上的代码:https://jsbin.com/cusekumiza
最佳答案
您可以使用大多数响应式框架解决这种情况的方式:使用“行”容器来“补偿”左右边距,方法是将它们设置为负值,如下所示:
.container {
display: flex;
flex-wrap: wrap;
//this will "cancel" the margin on the left an right side
margin-left:-10px;
margin-right:-10px;
justify-content:space-between; //this is to justify block on left and right side
//but it will set auto margin between block, don't set if you don't care of the right side
}
.card {
height: 250px;
width: 250px;
background-color: blue;
margin: 10px; // you appli normally the margin for your block
}
这是我的 js Bin:https://jsbin.com/buwezudiju/1/edit?html,output
关于css - 带有 css adjecent 选择器的响应式 flexbox 设计,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42467314/