Flexbox-首先在新线路上的包装中心项目

Question

我正在使用Flex Box创建传统的浮点项目列表。我有三个构造的项目，例如：

<section>
    <div>
        item one
    </div>
    <div>
        item two
    </div>
    <div>
        item three
    </div>
</section>

与CSS：

section{
    display: flex;
    flex-wrap: wrap;
}
div{
    width: 33%;
    min-width: 200px;
    border: 1px solid black;
}

在这种当前格式中，如果屏幕的宽度降至阈值以下，则item three将始终是第一个被推到新线路的孩子。

无论如何是否有配置Flex框，以便item two始终是第一个掉落的？

jsfiddle

Answer 1

您可以控制媒体查询中Flex项目的包装行为和顺序：

修订的小提琴

section {
  display: flex;
}
div {
  width: 33%;
  min-width: 200px;
  border: 1px solid black;
}
@media (max-width: 600px) {
  section { flex-wrap: wrap; }
  div:nth-child(2) { order: 1; }
}

<section>
  <div>item one</div>
  <div>item two</div>
  <div>item three</div>
</section>

从规格：

5.4。显示顺序：order属性

flex项目默认情况下，显示并以与源文档中显示的顺序相同的顺序显示和布置。这 order属性可用于更改此顺序。

order属性控制着挠性容器的儿童出现在Flex容器中的顺序， 将它们分配给序数。它需要一个<integer>值，该值指定哪个序列组flex项目 属于。

所有Flex项目的初始order值为0。

Answer 2

<section>
<div>
    item one
</div>
<div>
    item two
</div>
<div>
    item three
</div>
</section>
 section{
    display: flex;
    flex-wrap: wrap;
    flex-direction:column-reverse; 
 }
 div{
     width: 33%;
    min-width: 200px;
     border: 1px solid black;

更多示例您可以找到使用@Media（最大宽度：600px）{Exmple一个和示例2和Exmple 3和示例4和Exmple 5和Exmple 6