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

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 文件

/*************** 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 包裹在弹性容器中的项目：

如果 div3 包裹在 div2 下，那将不是 row，而是 grid，并且 flex 项目被限制在一个笔直的、不弯曲的行中.

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

因此，由行中不是最高的项目创建的空白将保留在每一列中，从而产生难看的间隙。

要让您想要的布局在row wrap 中工作，flex 项必须退出它们的行以缩小差距——也许是绝对定位——这是 flexbox 无法做到的。

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

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

可能有用的是column 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>

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?