使用flex order属性重新安排桌面和移动视图的项目
我有一个容器内的3个div。 没有嵌套的div。
我正在使用flex和order属性。
在移动设备上， order属性可以。
但在更大的屏幕上，它失败了。
我没有使用div 2和3的容器div，以便在移动设备上将它们命名为2,1,3。
HTML文件
<div class="container"> <div class="orange">1</div> <div class="blue">2</div> <div class="green">3</div> </div>
CSS文件
/*************** MOBILE *************/ .container { display: flex; flex-wrap: wrap; } div.blue { order:1; width: 100%; } div.orange { order:2; width: 100%; } div.green { order:3; width: 100%; } /***************************/ @media screen and (min-width:1200px) { .container { justify-content: space-between; } div.blue { order:2; width: 36%; } div.orange { order:1; width: 60%; } div.green { order:3; width: 36%; } }
在你的布局中，使用桌面视图的row wrap很难，如果不是不可能，用CSS实现。 至less，事情会变得过于复杂。 为什么？
由于flexbox不是网格系统。 这是一个布局系统，旨在通过分配容器中的空间来alignment内容。
在flexbox中， row wrap容器中的项目必须换行到新行 。 这意味着div3不能包装在div2下面。 它必须包裹在div1下面。
以下是如何将项目用换row wrap在柔性容器中：
如果div3包装在div2之下，那不会是一排 ，那将是一个网格 ，并且flex项目被限制在一个笔直的，不屈的行。
换句话说，你不能在同一行的另一个项目下制作一个flex项目。
因此，每列中保留的不是该行中最高的项目所创build的空白空间会产生难看的差距。
对于你想要的布局来进行row wrap ，flex项目将不得不退出他们的行，以缩小差距 – 也许绝对定位 – 哪个flexbox不能做。
alignment项目的一种方法是将div2和div3包装在自己的容器中。 这个新的容器将是div1的兄弟姐妹。 然后它可以成为一个flex-direction: column的嵌套柔性容器。 现在差距消失了，布局看起来不错。
除此之外，您需要order属性才能工作（意味着所有项目必须具有相同的父项），因此嵌套的弹性容器是不可能的。
可能的工作是column wrap row wrap而不是row wrap ：
/*************** MOBILE *************/ .container { display: flex; flex-direction: column; height: 200px; /* necessary so items know where to wrap */ } div.orange { background-color: orange; } div.blue { order: -1; background-color: aqua; } div.green { background-color: lightgreen; } .container > div { width: 100%; flex: 1; display: flex; align-items: center; justify-content: center; } /***************************/ @media screen and (min-width: 800px) { .container { flex-wrap: wrap; } div.orange { flex-basis: 100%; width: 50%; } div.blue { flex-basis: 50%; width: 50%; order: 0; } div.green { flex-basis: 50%; width: 50%; } }
<div class="container"> <div class="orange">1</div> <div class="blue">2</div> <div class="green">3</div> </div>
