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 应该保留（它是未声明的默认值，所以我们只是做不要将其重新声明为 column).

解决方案是允许使用 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

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

Flexbox: how to change order and direction simultaneously?

html

css

flexbox

responsive-design