Flexbox - 最后一个元素放置“浮动”右答案

【问题标题】：Flexbox - last element placement "floating" rightFlexbox - 最后一个元素放置“浮动”右
【发布时间】：2018-12-04 01:42:11
【问题描述】：

我必须为 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;
    }
  }
}

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

【问题讨论】：

可以编辑html吗？或者只是纯 CSS
纯 CSS。我猜它可以与一些育儿方式一起使用。但我不能碰标记，因为它只是为了破解 IE 中的布局
我不明白。你想使用浮点数还是 flexbox？
我想用弹性盒子
我没有看到不编辑 HTML 并且同时至少没有 position: absolute 的方法。您确定不能将左右列包装在 div 中，例如 .left 和 .right？它不应该影响网格，并且会使这个布局灵活。

标签： html css layout flexbox internet-explorer-11

【解决方案1】：

所以我得出结论：在不改变 html 标记的情况下使用 flexbox 是不可能的。

谢谢大家。

【讨论】：