一个柔性容器中的柔性盒砌体

Question

出于未说出口的原因，我需要这个 flexbox 网格：

http://codepen.io/af_bergstrom/pen/jqoJBb

.flex.flex__row
   .flex__item.red
   .flex__item.flex__item--large.blue
   .flex__item.green

要按以下方式工作，我需要将绿色框对齐到蓝色框左侧，红色框下方。

可以通过切换物理顺序的项目来更改标记，但我不能将元素包装在列中。

任何帮助将不胜感激。

Answer 1

使用普通标记和flexbox，就可以了

body {
  max-width: 500px;
  margin: 0 auto;
}
.flex {
  display: flex;
  background: gray;
  height: 200px;
}
.flex__col {
  flex-direction: column;
  flex-wrap: wrap;
}
.flex__item {
  height: 100px;
}
.flex__item--large {
  height: 200px;
}
.red {
  background: red;
}
.green {
  background: green;
}
.blue {
  background: blue;
}

<div class='flex flex__col'>
  <div class='flex__item red'></div>
  <div class='flex__item green'></div>
  <div class='flex__item flex__item--large blue'></div>
</div>