flexbox 的“rowspan”行为

Question

鉴于此标记：

<div class="foo">
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
</div>

还有 CSS：

.foo {
    display: flex;
    flex-wrap: wrap;
}

.a {
    flex: none;
    width: 50%;
    height: 100px;
    background: green;
}

.b {
    flex: none;
    width: 50%;
    height: 200px;
    background: blue;
}

.c {
    flex: none;
    width: 50%;
    height: 100px;
    background: red;
}

jsFiddle

有没有办法将红框放在上一行流中？我想避免修改标记。

这里的想法是元素应该在纵向和横向模式之间具有不同的布局，并且在纯 CSS 中做到这一点的唯一方法是使用带有 order 属性的 flexbox。据我所知，使用中间元素会锁定其子元素。

Answer 1

这就是你要找的吗？

.foo {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 200px;
}

.a, .c {
  flex: 0 0 50%;
  background: green;
}

.b {
  flex: 0 0 100%;
  order: 1;
  background: blue;
}
.c {
  background: red;
}

Quick codepen sample 带有 -webkit- 前缀

更新！ Tuned pen 横向/纵向比例