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中执行它的唯一方法是将flexbox与order属性一起使用.据我所知,使用中间元素会锁定其子元素.

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-前缀快速编写代码示例

更新!调谐笔具有横向/纵向比率