使用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-only实现的唯一方法是使用具有order属性的flexbox。据我所知，使用中间元素会锁定其子代。

- Maël Nison

---

不确定我是否理解您所寻找的内容，这是您正在尝试做的吗？http://jsfiddle.net/pJy66/2/，但它不是flex。 - G-Cyrillus

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

快速代码示例，带有-webkit-前缀

更新！调整后的代码示例，包含横向/纵向比例

- Veiko Jääger

---

能否在不设置 .foo 高度的情况下使其正常工作？ - Andreyu

这个答案非常好，你知道是否有一个可以容纳任意数量跨行的答案吗？ - J__

@J__ 我认为你可以编写一些JS来计算目标元素的数量和尺寸，但我不确定你是否只能使用CSS来管理它。 - Veiko Jääger

Veiko：我该如何将这个应用到<table>上？原因是，我需要使用传统的表格进行js排序，因此我不能在“列表”中使用多个<tr>。 - Trace DeCoy

@Andreyu，如果没有高度是无法完成的，因此基本上毫无用处...最好使用float、表格或网格（但缺乏支持）。 - Martin Zvarík

当我们想在第一列进行行合并时，该如何实现？ - RBG

Answer 2

只需将位置和底部添加到该c元素即可。

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;
    position: relative;
    bottom:100px;
}

- Abhishek