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

问题描述

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

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

我使用flex和 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

来源：

相关文章：？

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