你能指定 CSS flex 中包裹元素的顺序吗？答案

【问题标题】：Can you specify the order of wrapped elements in CSS flex?你能指定 CSS flex 中包裹元素的顺序吗？
【发布时间】：2017-07-03 11:11:08
【问题描述】：

我有一个<div>，它使用 CSS flex 来保持响应。

我正在寻找一种方法来指定元素的包装顺序。

例如，我需要

1 - 2 - 3

成为

1
3
2

完全包装后。

当前代码：https://jsfiddle.net/g0L44e5b/

这可能吗？

【问题讨论】：

请发布您的代码。我们需要查看当前布局，以及何时/如何包装。

标签： html css responsive-design flexbox

【解决方案1】：

是的，你可以，使用order 属性：

body {
  display:flex;
  flex-flow:column;
  }
p:last-child{
  order:1;
  }
p:nth-child(2) {
  order:2;
    }

<p>1</p>
<p>2</p>
<p>3</p>

这里有一个方便的资源https://css-tricks.com/snippets/css/a-guide-to-flexbox/

编辑后编辑

可以使用包装和媒体查询：

body {
  display:flex;flex-wrap:wrap;
  }
p {
  flex:1;
  min-width:380px;
  margin:10px;
  border:solid;
}
@media screen and (max-width : 800px) {
p:last-child{
  order:1;
  }
p:nth-child(2) {
  order:2;
    }
}

<p>1</p>
<p>2</p>
<p>3</p>

【讨论】：

【解决方案2】：

看看这支笔：

http://codepen.io/chriscoyier/pen/YPzyYa

笔的作用—— 首先给每个元素一个带有 order 属性的默认类：

.icon {
  order: 0 !important;
 }
.username {
  order: 1 !important;
  width: 100%;
  margin: 15px;
}
.search {
  order: 2 !important;
  width: 100%;
}

然后它为每个 flexbox 赋予一个特定的排序属性的类：

.bar-2 {
  .username {
    order: 2;
  }
}
.icon-3 {
  order: 3;
}

将排序类应用于您的案例，您应该一切顺利。

【讨论】：

【解决方案3】：

如果您使用媒体查询，您可以在父元素上使用flex-direction: column，在子元素上使用order: 1;、order: 2; 等，将它们按您需要的任何顺序排列。

【讨论】：