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：如何同时改变顺序和方向？

1 个答案: