带有 css 邻接选择器的响应式 flexbox 设计答案

【问题标题】：Responsive flexbox design with css adjecent selector带有 css 邻接选择器的响应式 flexbox 设计
【发布时间】：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 我不想在每行的第一个元素上留有余量。
可能重复：stackoverflow.com/q/42176419/3597276

标签： css css-selectors flexbox

【解决方案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

【讨论】：