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 Box，使其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 容器的子项分配给序数组来控制 Flex 容器的子项在 Flex 容器中出现的顺序。它采用单个<integer>值，该值指定弹性项目属于哪个序数组。

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