使用flex order属性重新排列桌面和移动视图的项目 [英] Using flex order property to re-arrange items for desktop and mobile views

问题描述

我有一个容器内有3个div。没有嵌套的div。

I have 3 divs inside a container. There are no nested divs.

我使用flex和 order 属性。

I am using flex and order property.

在移动设备上，订单属性确定。

On mobile, it is ok with order property.

失败。

我没有为divs 2和3使用容器div，以便在手机上将它们命名为2,1,3。

I did not use a container div for divs 2 and 3 in order to order them as 2,1,3 on mobile.

HTML FILE

HTML FILE

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

推荐答案

你的布局，使用行换行为桌面视图将是困难的，如果不是不可能，用CSS实现。至少，事情会变得过于复杂。为什么？

In your layout, using row wrap for the desktop view will be difficult, if not impossible, to implement with CSS. At a minimum, things would get overly complex. Why?

因为flexbox不是一个网格系统。

Because flexbox is not a grid system. It's a layout system designed to align content by distribution of space in the container.

在flexbox中，行换行中的项目 container必须换行到新行。这意味着div3不能包装在div2下面。

In flexbox, items in a row wrap container must wrap to new rows. This means that div3 cannot wrap beneath div2. It must wrap beneath div1.

这里是如何使用行换行在一个flex容器中换行：

如果div3要换行在div2下，不会是行，这将是一个网格，并且flex项目被限制在一个直的，无阻碍的行。

If div3 were to wrap under div2, that wouldn't be a row, that would be a grid, and flex items are confined to a straight, unbending row.

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

Put another way, you can't make a flex item wrap under another item in the same row.

对于您需要的布局在行换行中工作，flex项目必须退出其行才能关闭

For your desired layout to work in row wrap, flex items would have to exit their row in order to close the gap – maybe with absolute positioning – which flexbox cannot do.

对齐项目的一种方法是在自己的容器中包装div2和div3。这个新容器将是div1的兄弟。然后，它可以成为 flex-direction：column 的嵌套flex容器。

One way to align the items would be to wrap div2 and div3 in their own container. This new container would be a sibling to div1. It can then become a nested flex container with flex-direction: column. Now the gaps are gone and layout looks right.

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

Except, in this particular case, you need the order property to work (meaning all items must have the same parent), so a nested flex container is out of the question.

可以工作的是列 c：

lang =jsdata-hide =falsedata-console =truedata-babel =false>

/*************** 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>

以下是另外两个选项：（第二个选项主要是FYI，因为大多数浏览器尚未完成实施。）

Here are two other options: (The second option is mostly FYI, as most browsers haven't completed implementation.)

• a href =http://masonry.desandro.com/ =nofollow noreferrer> Desandro Masonry

Masonry是一个JavaScript网格布局库。它
的工作原理是根据可用的
垂直空间将元素放置在最佳位置，就像一个石匠在墙上拟合石头一样。

Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall.

^{来源： http://masonry.desandro.com/}

CSS网格布局模块一级

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

This CSS module defines a two-dimensional grid-based layout system, optimized for user interface design. In the grid layout model, the children of a grid container can be positioned into arbitrary slots in a predefined flexible or fixed-size layout grid.

^{来源： https://drafts.c​​sswg.org/css-grid/}

相关文章：包装行的flexbox容器中的项目与其上方的项目紧密对齐？

这篇关于使用flex order属性重新排列桌面和移动视图的项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！