使用 flex order 属性重新排列桌面和移动视图的项目

Posted 2023-03-07

【中文标题】使用 flex order 属性重新排列桌面和移动视图的项目

【英文标题】：Using flex order property to re-arrange items for desktop and mobile views

【发布时间】：2017-04-28 20:30:09

【问题描述】：

我在一个容器中有 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%;

【问题讨论】：

***.com/a/40098473/3761177

对于不关心解决方案是否使用网格的人，请参阅：stackblitz.com/edit/typescript-vlgtnr?file=style.css

相关***.com/questions/32829567/…

【参考方案1】：

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

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

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

下面是使用row wrap 包裹在弹性容器中的项目：

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

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

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

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

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

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

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

【讨论】：

在display:contents 可用的情况下，是否值得添加框 2 和 3 的包装？只是为了完整性。这是一个很好的规范答案。

有没有办法在不硬编码高度的情况下做到这一点？ IE 将高度设置为 1 或 2+3 中的较大者。

@WhiteleyJ，考虑发布一个包含所有详细信息的问题，包括相关代码。