Flexbox

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;
    }
  }
}

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

Answer 1

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

谢谢大家。

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

Flexbox - last element placement "floating" right

html

css

layout

internet-explorer-11