Question

是否可以为Flex容器中不在边缘的项目定义边距？例如，我希望连续的第一个和最后一个项目的边距为零，以便它与容器的边缘齐平，但其间的任何项目都有左边距和右边距。我无法:first-child或:last-child b / c如果我缩小窗口大小，: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中的非边缘项添加边距

1 个答案: