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

Posted 2023-03-07

【中文标题】你能指定 CSS flex 中包裹元素的顺序吗？

【英文标题】：Can you specify the order of wrapped elements in CSS flex?

【发布时间】：2017-07-03 11:11:08

【问题描述】：

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

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

例如，我需要

1 - 2 - 3

成为

1
3
2

完全包装后。

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

这可能吗？

【问题讨论】：

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

【参考方案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; 等，将它们按您需要的任何顺序排列。