如何为 flex 中的非边缘项目添加边距

Question

是否可以为弹性容器内不在边缘的项目定义边距？例如，我希望我一行中的第一个和最后一个项目的边距为零，以便它与容器的边缘齐平，但中间的任何项目都具有左右边距。我不能做 :first-child 或 :last-child b/c 如果我缩小 window 大小，:last-child 可能在另一行，这将强制项目包装到下一行。

Css:

.parent {
  display:flex; flex-wrap:wrap; background:gray;
}

.item {
  flex: 1 1 100px; background: white; margin: 10px;
}

Html:

<div class="parent">
  <div class="item">
    hello
  </div>
  <div class="item">
    world
  </div>
  <div class="item">
    flex
  </div>
</div>

Jsbin: http://jsbin.com/hidife/1/edit

Answer 1

你可以用负边距实现你想要的：

改变这个：

.parent {
  display:flex; 
  flex-wrap:wrap; 
  background:gray;
}

.item {
  flex: 1 1 100px; 
  background: white; 
  margin: 10px;
}

为此：

body {
  margin: 0;
  padding: 0;
}

.parent {
  display: flex; 
  flex-wrap: wrap; 
  background: gray;
  margin-left: -10px;
}

.item {
  flex: 1 1 100px;
  background: white; 
  margin: 10px 0 10px 10px;
}

如何为 flex 中的非边缘项目添加边距

How to add margin just for non-edge items in flex

css

flexbox