Flexbox - 换行中心项目首先 [英] Flexbox - Wrap Center Item on New Line First

问题描述

我使用Flex Box来创建传统的浮动项目列表。我有三个结构的项目：

I am using Flex Box to create a traditional float items list. I have three items structured like:

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

在此当前格式中， c $ c>将总是第一个孩子推送到一个新行，如果屏幕的宽度降到阈值以下。

In this current format, item three will always be the first child pushed to a new line if the width of the screen drops below a threshold.

是否仍然要配置Flex Box，以便第二个始终是第一个删除？

Is there anyway to configure Flex Box so that item two is always the first to drop?

JSFiddle

推荐答案

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

You can try controlling the wrapping behavior and order of flex items in a media query:

revised fiddle

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。显示顺序：订单属性

Flex项目默认显示并按照在源文档中出现的顺序排列。
order 属性可用于更改此顺序。

Flex items are, by default, displayed and laid out in the same order as they appear in the source document. The order property can be used to change this ordering.

order 属性控制flex容器的子容器在flex容器内的顺序，通过
将它们分配到序数组。它需要一个< integer> 值，它指定flex项目
所属的顺序组。

The order property controls the order in which children of a flex container appear within the flex container, by assigning them to ordinal groups. It takes a single <integer> value, which specifies which ordinal group the flex item belongs to.

所有flex项目的初始 order 值为0.

The initial order value for all flex items is 0.

这篇关于Flexbox - 换行中心项目首先的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！