Question

我在容器内有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 FILE

/*************** 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%;
}
}

Answer 1

在您的布局中，使用row wrap进行桌面视图将很难（如果不是不可能）使用CSS实现。事情至少会变得过于复杂。为什么呢？

因为flexbox不是网格系统。它是一个布局系统，旨在通过容器中的空间分布来对齐内容。

在flexbox中，row wrap容器中的项目必须换行到新行。这意味着div3无法包装在div2下面。它必须包裹在div1下面。

以下是项目如何使用row wrap包装在Flex容器中：

如果div3要包装在div2下，那不会是行，那将是网格，而flex项目被限制为直线，不屈不挠的行。

换句话说，你不能在同一行的另一个项目下进行弹性项目包装。

因此，每行中都保留了不是行中最高项目所创建的空白区域，从而产生难看的间隙。

为了让你想要的布局在row wrap中工作，flex项目必须退出他们的行以缩小差距 - 可能是绝对定位 - 灵活盒无法做到。

对齐项目的一种方法是将div2和div3包装在自己的容器中。这个新容器将成为div1的兄弟。然后它可以成为flex-direction: column的嵌套Flex容器。现在差距已经消失，布局看起来正确。

除此之外，在这种特殊情况下，您需要order属性才能工作（意味着所有项目必须具有相同的父项），因此嵌套的Flex容器是不可能的。

可能有效的是column wrap而不是row wrap：

＆＃13;

/*************** 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%;
  }
}

＆＃13;

<div class="container">
  <div class="orange">1</div>
  <div class="blue">2</div>
  <div class="green">3</div>
</div>

＆＃13;

jsFiddle

以下是另外两个选项：

Desandro Masonry


Masonry是一个JavaScript网格布局库。它   基于可用的元素将元素放置在最佳位置   垂直空间，有点像石匠在墙上贴石头。

^{来源：http://masonry.desandro.com/}
CSS Grid Layout Module Level 1

此CSS模块定义了一个基于网格的二维布局系统，针对用户界面设计进行了优化。在网格布局模型中，网格容器的子节点可以放置在预定义的灵活或固定大小的布局网格中的任意插槽中。

^{来源：https://drafts.csswg.org/css-grid/}

相关文章：Is it possible for flex items to align tightly to the items above them?

使用弹性订单属性重新排列桌面和移动视图的项目

1 个答案:

jsFiddle