让弹性项目脱离流程 - IE11

Question

我有一个带有display:flex; 的容器，在该容器中我有时会有 2 件物品，有时我会有 3 件物品。我正在使用justify-content:space-between;，我希望这两个项目以这种方式隔开。当有第 3 项时，我仍然希望那些原始 2 项为 space-between，然后我希望第 3 项脱离弹性流程。为了做到这一点，我在第三项使用position:absolute;。在 Chrome/Firefox/Safari 中这工作正常，但在 IE 中，绝对定位的项目采用space-between，因此第二个元素元素的定位是关闭的（它直接放置在容器的中间）。我该如何解决这个问题？我对替代解决方案持开放态度，但我无法更改 HTML 的结构，因此它必须是基于 CSS 的解决方案。

.flex {
  display:flex;
  justify-content:space-between;
  width:250px;
  border:1px solid black;
  padding:5px;
  margin:30px auto;
  position:relative;
}
  .flex.abs {
    padding-left:40px;
  }
    .flex.abs div:first-child {
      position:absolute;
      left:-30px;
    }

<div class="flex">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<div class="flex abs">
  <div>Absolute</div>
  <div>Item 1</div>
  <div>Item 2</div>
</div>

这是它在 Chrome 中的外观（需要）：

这是它在 IE 中的外观：

Answer 1

您只需 margin 即可完成此操作，而无需 position:absolute

.flex {
  display: flex;
  width: 250px;
  border: 1px solid black;
  padding: 5px;
  margin: 30px auto;
}

.flex div:nth-last-child(3) {
  margin-left: -35px;
  margin-right:10px;
}

.flex div:last-child {
   margin-left:auto;
}

<div class="flex">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<div class="flex">
  <div>Absolute</div>
  <div>Item 1</div>
  <div>Item 2</div>
</div>

Answer 2

如果您将第 1 项设为弹性容器，则不需要绝对位置，

这是一个想法

.flex {
  display: flex;
  justify-content: space-between;
  width: 250px;
  border: 1px solid black;
  padding: 5px;
  margin: 30px auto;
  position: relative;
}

.flex-start {
  display: flex;
}

<div class="flex">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<div class="flex">
  <div class="flex-start">
    <div>Absolute</div>
    <div>Item 1</div>
  </div>
  <div>Item 2</div>
</div>