Flexbox：如何同时改变顺序和方向？

Question

我有 3 个 div 可以正确显示一个相邻的，水平方向，如下所示：

div0  div1  div2

当媒体宽度小于 600px 时，我非常希望 div 像这样显示：

div0  div2
   div1

现在我只能设法得到这个：

div0
div2
div1

我改变了方向和顺序：

.wrapper  {
        flex-direction: column;
      }
      .div1 {
        -webkit-order: 3;
        order: 3;
      }
}

我明白为什么它不能给出预期的结果，但我不知道从那里去哪里。我想这与flex-wrap 有关，但我不确定。

---

这里是这个问题的plunk。

---

我想这对某些人来说一定是微不足道的，但我对 FlexBox 很陌生。

感谢您的帮助。

Answer 1

诀窍是不更改flex-flow 属性，因为通过切换到列，您将阻止元素以您想要的方式并排排列。如果你仔细看看你想要的布局，它仍然是基于row的，所以flex-flow: row应该保留（它是未声明时的默认值，所以我们根本不把它重新声明为@ 987654324@).

解决方案是允许使用 flex-wrap: wrap 进行换行。 Flex 元素默认关闭环绕，但您可以启用它。为确保 .div0 和 .div2 将保留在第一行，为它们分配了一个总计为 100% 的 flex-basis 值。我为每个使用了 50%，因为您没有指定它们的相对宽度应该如何。

@media all and (max-width: 600px) {
      .wrapper  {
        flex-direction: row;
        flex-wrap: wrap;
      }
      .div0, .div2 {
        flex-basis: 50%;
      }
      .div1 {
        -webkit-order: 3;
        order: 3;
        flex-basis: 100%;
      }
}

查看工作演示：http://plnkr.co/edit/1gv0oPASUcGbK70Gn55k?p=preview