使 Flexbox 上下颠倒换行

今天，我正在查看我构建的“选项卡”HTML gizmo，我注意到由于我使用 inline-block 来布局选项卡标题，当它们包装时，我会得到如下所示的输出：

  +-------+  +--------+  +--------+  +------+  +------------+  +-----+
  | Apple |  | Banana |  | Cherry |  | Date |  | Elderberry |  | Fig |
  +-------+  +----------+
  | Grape |  | Honeydew |
--+       +--------------------------------------------------------------
  

没问题，我想：我打赌我可以使用 flexbox 让它包裹得更干净，这样第二行就可以了above第一个，这样对于用户来说它看起来就像是在第一行的“后面”，如下所示：

  +-------+  +----------+
  | Grape |  | Honeydew |
  +-------+  +--------+  +--------+  +------+  +------------+  +-----+
  | Apple |  | Banana |  | Cherry |  | Date |  | Elderberry |  | Fig |
--+       +--------------------------------------------------------------
  

这并不完美，但也不错，而且它模仿了 Windows 中 Tab 控件的功能。

因此，我编写了几行 Flex CSS，然后我所要做的就是添加指定从下到上行的 Flexbox 属性，然后就完成了。我做到了：

ul.fruits {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: flex-end;
  align-content: flex-end;
}

当然，规范说横轴与书写方向相匹配(W3C 规范链接 https://www.w3.org/TR/2016/CR-css-flexbox-1-20160526/#flex-wrap-property)。然后我意识到我无法添加writing-mode: horizontal-bt让它从下到上，因为没有这样的writing-mode in CSS (W3C 规范链接 https://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode).

我意识到对以相反行顺序换行的段落没有太多需求，但这似乎是偶尔有用的东西，并且似乎不存在于规范中。

（可能的 hacky 解决方案：我想我可以使用 CSS 转换来翻转容器，然后翻转其中的元素，但这似乎是对应该“正常工作”的东西的逃避。）

那么，有人对如何让 Flexbox 包裹行以使横轴进入行有什么好的想法吗？opposite写入模式中指定的方向？有可能吗？

（可以在这里找到要使用的 JSFiddle 示例：https://jsfiddle.net/seanofw/Lk9wyL9s/ https://jsfiddle.net/seanofw/Lk9wyL9s/ )

Try:

flex-flow: row wrap-reverse

修订版小提琴 https://jsfiddle.net/Lk9wyL9s/2/

5.2.柔性线缠绕：flex-wrap财产 https://www.w3.org/TR/css-flexbox-1/#flex-wrap-property

The flex-wrap属性控制 Flex 容器是否 单线或多线，以及交叉轴的方向， 确定新行堆叠的方向。

nowrap

Flex 容器是单行的。

wrap

Flex 容器是多行的。

wrap-reverse

与包裹相同。

对于不存在的值wrap-reverse, 交叉起始方向 相当于内联开始或块开始方向 当前的写入模式（以横轴中的为准）和 cross-end 方向与 cross-start 方向相反。

When flex-wrap is wrap-reverse，交叉起点和交叉终点方向交换。

_{(emphasis added)}