列反向中的弹性排序答案

【问题标题】：Flex ordering in column reverse列反向中的弹性排序
【发布时间】：2019-09-13 00:36:02
【问题描述】：

我有以下标记：

.colReverse {
  display: flex;
  /* flex-direction: column-reverse; */
  flex-direction: column;
}

.border:after{
  content: "";
  display: block;
  width: 80%;
  background-color: black;
  height: 1px;
  margin: 60px auto 0px;
  order: 3;
}

<div class="colReverse border">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

在桌面上，flex-direction 是 column，所以项目、项目、边框。这就是我想要的（边框总是最后的）。

在移动设备上，我将flex-direction 更改为column-reverse，这显然将边框置于项目之上。

由于我总是希望边框位于底部，因此我已将 order 指定为第三个（或最后一个）。然而，这行不通？想法为什么？

【问题讨论】：

在列反转时你需要做相反的事情，例如一个负值
一个简单的解决方案是使伪绝对定位，这将使它脱离流，然后给它bottom: 0。这样不管你用哪个方向，它总是在底部

标签： html css flexbox

【解决方案1】：

从column 切换到column-reverse 不会自动发生。你需要一个触发器。最简单的解决方案是媒体查询。

因此，只需在媒体查询中添加第二条规则，以使您的边框在较小的屏幕上保持原位。

.colReverse {
  display: flex;
  flex-direction: column;
}

.border::after {
  content: "";
  width: 80%;
  background-color: black;
  height: 1px;
  margin: 60px auto 0px;
}

@media ( max-width: 500px ) {
  .colReverse {
    flex-direction: column-reverse;
  }
  .border::after {
    order: -1;
  }
}

<div class="colReverse border">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

jsFiddle demo

【讨论】：