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

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

revised fiddle

＆＃13;

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

＆＃13;

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

＆＃13;

来自规范：

5.4. Display Order: the order property

默认情况下，Flex项目的显示和排列顺序与它们在源文档中显示的顺序相同。该   order属性可用于更改此顺序。

order属性控制Flex容器的子项在Flex容器中的显示顺序   将它们分配给序数组。它需要一个<integer>值，它指定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（max-width：600px）{exmple one和 example 2和exmple 3以及example 4和exmple 5以及exmple 6

Flexbox - 首先在新线上包裹中心项目

2 个答案: