html - Flexbox - 最后一个元素放置在 "floating"右边

Question

我必须为 IE11 编写一些网格回退。

我想将元素 4 放在右下角，以便元素 1 可以一直向下延伸到底部吗？

我认为这对 flexbox 来说是不可能的，对吧？ : https://jsfiddle.net/b7w0pc4q/4/

<div class="flexContainer">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
</div>

SCSS:

.flexContainer {
  display: flex;
  background-color: #223;
  min-height: 100vh;
  flex-wrap: wrap;
  .item {
    border: solid 1px red;
    padding: 20px;
    &:nth-child(1) {
      width: 50%;
      align-self: stretch;
      background-color: #a69eff;
    }
    &:nth-child(2), &:nth-child(3) {
      width: 25%;
      background-color: #ffb76f;
      align-self: flex-start;
    }
    &:nth-child(4) {
      background-color: #ffee80;
      width: 51%;
      margin-left: auto;
    }
  }
}

使用经典的 float 布局非常简单:https://codepen.io/Sepp/pen/MXBrzy?editors=1100但我还不想放弃。有什么想法吗？

Answer 1

所以我得出结论:不改变 html 标记就不可能使用 flexbox。

谢谢你们。