css - 使 flexbox 换行倒置

Question

今天我正在查看我构建的“Tabs”HTML gizmo，我注意到由于我使用内联 block 来布置选项卡标题，当它们换行时，我得到的输出看起来有点像像这样:

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

No problem, I thought: I bet I can use flexbox to make it wrap more cleanly, so that the second row goes above the first so that it looks like it's "behind" the first row to the user, like this:

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

That's not perfect, but it's not bad, either, and it mimics what the Tab control does in Windows.

So I hacked up a few lines of flex CSS and got to the point where all I'd have to do is add whatever the flexbox property was that specifies rows go from bottom to top, and then I'd be done. I got to this:

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

当然，规范说横轴与书写方向匹配( link to W3C spec )。然后我意识到我不能添加 writing-mode: horizo​​ntal-bt 让它从下到上，因为 CSS 中没有这样的 writing-mode ( link to W3C spec )。

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

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

那么，对于如何让 flexbox 包装行，使横轴与 writing-mode 中指定的方向相反，有没有人有什么好主意？有可能吗？

---

(可在此处找到可使用的 JSFiddle 示例:https://jsfiddle.net/seanofw/Lk9wyL9s/)

Answer 1

尝试:

flex-flow: row wrap-reverse

Revised Fiddle

5.2. Flex Line Wrapping: the flex-wrap property

The flex-wrap property controls whether the flex container is single-line or multi-line, and the direction of the cross-axis, which determines the direction new lines are stacked in.

nowrap

The flex container is single-line.

wrap

The flex container is multi-line.

wrap-reverse

Same as wrap.

For the values that are not wrap-reverse, the cross-start direction is equivalent to either the inline-start or block-start direction of the current writing mode (whichever is in the cross axis) and the cross-end direction is the opposite direction of cross-start.

When flex-wrap is wrap-reverse, the cross-start and cross-end directions are swapped.

_{(emphasis added)}