Question

我有一个Flexbox，左边有2个盒子，右边有1个盒子。我需要右边的方框在左边的两个方框之间楔入。

[编辑：澄清]第3栏应完全展开，以消耗与左侧第1和第2栏相同的空间。[/ EDIT]

＆＃13;

.rowParent {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: stretch;
  align-items: stretch;
}
.flexChild {
  flex: 1;
  -webkit-align-self: auto;
  -ms-flex-item-align: auto;
  align-self: auto;
}
.flexChild2 {
  flex: 1 100%;
  -webkit-align-self: auto;
  -ms-flex-item-align: auto;
  align-self: auto;
}
#columnChild41158 {
  background-color: green;
  order: 1;
}
#columnChild61714 {
  background-color: red;
  order: 3;
}
#rowChild24054 {
  background-color: blue;
  order: 2;
}
@media (min-width: 1000px) {
  .columnParent {
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .flexChild2 {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }
}

＆＃13;

<div id="container" class="flexChild rowParent">
  <div id="rowChild71124" class="flexChild2 columnParent">
    <div id="columnChild41158" class="flexChild">1</div>
    <div id="columnChild61714" class="flexChild">2</div>
  </div>
  <div id="rowChild24054" class="flexChild">3</div>
</div>

＆＃13;

这是我想要做的事情的代码：

http://codepen.io/ants/pen/rLYVPa

目前是：

1       3        
2

一旦浏览器低于1000px，我希望它以100％宽度的项目堆叠，但是：

1
3
2

我尝试使用订单，但似乎无法正常工作。

Answer 1

除非你在flex容器上设置固定高度，否则我认为没有其他方法可以做到这一点。要更改元素的顺序，您不能在HTML中使用嵌套元素。

* {
  box-sizing: border-box;
  margin: 0;
}
.content {
  display: flex;
  height: 100vh;
  flex-direction: column;
  flex-wrap: wrap;
}
.box {
  flex: 0 0 50%;
  width: 50%;
  border: 1px solid black;
}
.last {
  flex: 1;
  background: lightblue;
}
@media(max-width: 768px) {
  .box {
    flex: 1;
    width: 100%;
  }
  .last {
    order: 2;
  }
  .second {
    order: 3;
  }
}

<div class="content">
  <div class="box first">1</div>
  <div class="box second">2</div>
  <div class="box last">3</div>
</div>

Answer 2

如果您可以移除额外的包装器div以使所有弹性项目处于同一级别，则可以在媒体查询中使用flex-flow: column nowrap;和flex-flow: row wrap;加上order和{ {1}}技巧。

＆＃13;

width

＆＃13;

.rowParent {
  display: flex;
  flex-flow: column nowrap;
}
.flexChild {
  width: 100%;
}
.flexChild2 {
  order: 1;
}
@media (min-width: 1000px) {
  .rowParent {
    flex-flow: row wrap;
  }
  .flexChild {
    width: 50%;
  }
}
.flexChild1 { background-color: lightgreen; }
.flexChild2 { background-color: lightpink; }
.flexChild3 { background-color: lightblue; }

＆＃13;

Flexbox重新排列2个嵌套项目之间的订单

2 个答案: