CSS - 在两个 div 之间添加边距

Question

有没有办法在两个 div 之间创建一个内部空间，而无需为每个 div 添加额外的类并应用 margin-right & margin-left？我希望 .list 的孩子们填满容器，但他们之间有一个空间。

.list {
  display: flex;
  width: 100px;
  border: 1px solid blue
}

div {
  flex: 1;
  border: 1px solid
}

<div class="list">
  <div>Item</div>
  <div>Item</div>
</div>

Answer 1

使用 CSS 伪类 :first-child 选择 div.list 中的第一个 div 使用 :last-child 选择最后一个 div。

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

.list {
  display: flex;
  width: 100px;
  border: 1px solid blue
}

div {
  flex: 1;
  border: 1px solid
}

.list div:first-child {
  margin-right: 10px;
}

.list div:last-child {
  margin-left: 10px;
}

<div class="list">
  <div>Item</div>
  <div>Item</div>
</div>