Question

我有<div>使用CSS flex来保持响应。

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

例如，我需要

1 - 2 - 3

成为

1
3
2

完全包裹。

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

这可能吗？

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

修改后修改

可以使用

wrap和mediaquerie：

＆＃13;

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

＆＃13;

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

＆＃13;

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

将排序类应用到您的案例中，您应该好好去。

Answer 3

如果您使用媒体查询，则可以在父元素上使用flex-direction: column，在子元素上使用order: 1;，order: 2;等，以便按照您需要的顺序添加它们。

你能指定CSS flex中包装元素的顺序吗？

3 个答案: