Question

我在flexbox中有一个flex项目列表。项目的顺序很重要，为了便于访问，项目需要以正确的顺序显示在dom中。

[[意达] [itemb] [itemc]]

当flexbox收缩时，我希望项目以相反的顺序换行，例如itema首先包装，等等。有没有办法让itema先包装？谢谢！

编辑：

这是代码

<div class="flex">
    <div class="container">
        <div class="item">item1</div>
        <div class="item orange">item2</div>
        <div class="item blue">item3</div>
    </div>
    <div class="last-item green">menu</div>
</div>

.flex {
    display: flex;
    background-color: yellow;
    height: 80px;
    overflow: hidden;
    color: #fff;
}

.container {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
}

.item {
    flex: 0 0 auto;
    background-color: red;
    height: 80px;
    padding: 0 40px;
}

.last-item {
    width: 40px;
    flex: 0 0 auto;
    height: 80px;
}

JSFiddle

所有行为都符合要求，但我希望第一个项目先包装。有任何想法吗？谢谢！

Answer 1

您可以使用flex-direction: column-reverse来获得解决方案。

@media (max-width: 768px) {
  .flex-box {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }
}
.first,
.second,
.third {
  display: inline-block;
}

<div class="flex-box">
  <div class="first">
    <p>First Box</p>
    <img src="http://placehold.it/300x300" />
  </div>
  <div class="second">
    <p>Second Box</p>
    <img src="http://placehold.it/300x300" />
  </div>
  <div class="third">
    <p>Third Box</p>
    <img src="http://placehold.it/300x300" />
  </div>
</div>

JSfiddle Demo

Answer 2

要先包装item1，可以在flex容器上使用flex-wrap: wrap-reverse。

尝试使用此简化版代码：

<div class="container">
    <div class="item">item1</div>
    <div class="item orange">item2</div>
    <div class="item blue">item3</div>
</div>

.container {
    display: flex;
    flex: 0 1 auto;
    flex-wrap: wrap-reverse;
}

.item {
    background-color: red;
    height: 80px;
    padding: 0 40px;
}

.orange {
  background-color: orange;
}
.blue {
    background-color: blue
}

有关浏览器支持，请参见MDN reference。

按相反顺序重新排序列

2 个答案: