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

带有-webkit-前缀的

Quick codepen sample

<强>更新！具有横向/纵向比率的Tuned pen

flexbox的“rowspan”行为

1 个答案: