css - 可以弯曲：1 和负 px？

Question

我有一个绝对位置的元素，并且有一个我不想重叠的容器视图，我想知道是否有可能让父级的孩子用 flex 填充空间但用 px 减少它？就这样我的绝对元素不会重叠？

标签： css

Answer 1

您可以设置margin弹性项目：

#container {
  display: flex;
  outline: 1px dotted blue
}

#container div {
  flex: 1 0 auto;
  outline: 1px dotted orange;
  margin: 10px;
}

#container div:last-child {
  margin-right: 60px;
}

<div id="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

这是没有margin作为比较的：

#container {
  display: flex;
  outline: 1px dotted blue
}

#container div {
  flex: 1 0 auto;
  outline: 1px dotted orange;
}

#container div:last-child {
}

<div id="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>