带有 css 邻接选择器的响应式 flexbox 设计
Posted
技术标签:
【中文标题】带有 css 邻接选择器的响应式 flexbox 设计【英文标题】:Responsive flexbox design with css adjecent selector 【发布时间】:2017-07-16 23:28:29 【问题描述】:相邻选择器可以很好地用于获取元素之间的边距,例如卡片设计。但是在制作响应式元素时,如何在使用 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
【问题讨论】:
您可以直接在.card
本身上使用margin
属性,而不是在相邻元素上使用margin-left
。
如果您不想将margin-left
用于第一张卡片,而将margin-right
用于最后一张卡片,请尝试将justify-content: space-between;
用于.container
@MuraliKrishna with space-between 你得到可变间距。我想要固定间距。
@MuraliKrishna 我不想在每行的第一个元素上留有余量。
可能重复:***.com/q/42176419/3597276
【参考方案1】:
您可以使用大多数响应式框架解决这种情况的方式:使用“行”容器来“补偿”左右边距,将它们设置为负值,如下所示:
.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 斌:https://jsbin.com/buwezudiju/1/edit?html,output
【讨论】:
以上是关于带有 css 邻接选择器的响应式 flexbox 设计的主要内容,如果未能解决你的问题,请参考以下文章