时间戳

首页 > 解决方案 > 列反向中的弹性排序

html - 列反向中的弹性排序

问题描述

我有以下标记：

.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是第三个（或最后一个）。然而，这行不通？想法为什么？

标签： htmlcssflexbox

解决方案

从columnto切换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 演示

推荐阅读