Question

我想制作类似于未知数量项目的新闻列表（不是真的，但在这样解释时才有意义）。我想要反转它，所以如果我在和它添加一个，它将显示为第一个。我尝试将flexbox与flex-wrap: wrap-reverse; flex-direction: row-reverse一起使用（使用简写flex-flow）。

#news {
  display: flex;
  flex-flow: row-reverse wrap-reverse;
  justify-content: space-around;
  width: 270px;
}

.report {
  height: 50px;
  width: 70px;
  background-color: yellow;
  margin: 5px;
}

<div id="news">
  <div class="report">Other report</div>
  <div class="report">Other report</div>
  <div class="report">Other report</div>
  <div class="report">Other report</div>
  <div class="report">Other report</div>
  <div class="report">2 mins old</div>
  <div class="report">The new one</div>
</div>

但是，正如您在上面看到的那样，第一个（HTML中的最后一个）项目在“第一”行上是唯一的。我能解决这个问题吗？或者我还能做到这一点（理想情况下没有JS）？

Answer 1

<强>更新

因为它使用flex-wrap: wrap-reverse，所以DOM顺序中的最后一个元素仍然被flexbox视为＆＃34;适合＆＃34;的最后一个元素。到flexbox架构。 wrap-reverse只是意味着元素被包裹在前面的元素之上而不是下面。基本上，要让第一行填充非＆＃34; flex-growed＆＃34;具有纯CSS的项目是不可能的。以下解决方案有效，因为flex-grow允许最后一个元素占用空白区域。

另一种选择是确保你总是拥有适当数量的元素，以确保最后一行（在顶部呈现）总是满的，如下所示：

＆＃13;

#news {
  display: flex;
  flex-flow: row-reverse wrap-reverse;
  justify-content: space-around;
  width: 270px;
}

.report {
  height: 50px;
  width: 70px;
  background-color: yellow;
  margin: 5px;
  flex: auto;
}

＆＃13;

<div id="news">
  <div class="report">Other report</div>
  <div class="report">Other report</div>
  <div class="report">Other report</div>
  <div class="report">Other report</div>
  <div class="report">Other report</div>
  <div class="report">Other report</div>
  <div class="report">Other report</div>
  <div class="report">2 mins old</div>
  <div class="report">The new one</div>
</div>

＆＃13;

原始答案

您必须在子级报告中指定flex属性：

＆＃13;

#news {
  display: flex;
  flex-flow: row-reverse wrap-reverse;
  justify-content: space-around;
  width: 270px;
}

.report {
  height: 50px;
  width: 70px;
  background-color: yellow;
  margin: 5px;
  flex: auto;
}

＆＃13;

<div id="news">
  <div class="report">Other report</div>
  <div class="report">Other report</div>
  <div class="report">Other report</div>
  <div class="report">Other report</div>
  <div class="report">Other report</div>
  <div class="report">2 mins old</div>
  <div class="report">The new one</div>
</div>

＆＃13;

等

Answer 2

使用给定的标记，没有使用脚本，可以使用order属性。

结合未知数量的项目，仍然需要基于 max 项目数量，我在这里开始的时间最多为100个。

Stack snippet

#news {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  width: 270px;
}

.report {
  height: 50px;
  width: 70px;
  background-color: yellow;
  margin: 5px;
}

.report:nth-child(1) { order: 100; }
.report:nth-child(2) { order:  99; }
.report:nth-child(3) { order:  98; }
.report:nth-child(4) { order:  97; }
.report:nth-child(5) { order:  96; }
.report:nth-child(6) { order:  95; }
.report:nth-child(7) { order:  94; }
.report:nth-child(8) { order:  93; }
.report:nth-child(9) { order:  92; }
/*  and so on...  */

<div id="news">
  <div class="report">Other report</div>
  <div class="report">Other report</div>
  <div class="report">Other report</div>
  <div class="report">Other report</div>
  <div class="report">Other report</div>
  <div class="report">2 mins old</div>
  <div class="report">The new one</div>
</div>

另一个选项可能是，如果这些元素是动态呈现在服务器/客户端，则可以内联添加order属性，如我的答案所示：

Efficient way to place orphaned element(s) at top/beginning using CSS flexbox

有了这个你可以从例如order: 10000，保存一些CSS编码并从那里倒数。

Answer 3

我在这里看到的问题在于，在你自己的例子中，最后一项已经在最后一行的中心。应该是吗？通常你希望它与屏幕的左侧对齐，对吧？

如果这是正确的，我知道的唯一非js修复方法是添加隐藏的零高度占位符。它在stackoverflow上的某处描述。

当您不知道要添加多少个占位符时，您可以添加任何安全数字，因为它们的高度为0，它们不会影响可视化表示。

现在，如果我们将这种技术应用到示例中，结果就是这样。

https://jsfiddle.net/4L3actqd/

#news {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  width: 270px;

  & > .hidden-f { display: none; }
  & > .hidden-e { display: block; }

  &.reversed {
    flex-flow: row-reverse wrap-reverse;    

    & > .hidden-f { display: block; }
    & > .hidden-e { display: none; }
  }
}

.report {
  height: 50px;
  width: 70px;
  background-color: yellow;
  margin: 5px;
}

.hidden-e, .hidden-f {
  width: 70px;
  height: 0px;
  margin: 5px;  
  opacity: 0.1;
}

Flexbox完全反转

3 个答案: