css - 可以 flex : 1 and minus px?

Question

我有一个绝对位置的元素，并且有一个我不想与之重叠的容器 View ，我想知道是否有可能让父级的 child 用 flex 填充空间但用 px 减少它？只是为了我的绝对元素不会重叠？

Answer 1

您可以在 flex 元素上设置边距:

#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>