使flexbox包装行倒置

Question

今天我正在查看我构建的'Tabs'HTML小发明,我注意到因为我使用内联块来布局标题页,当它们换行时,我会得到如下所示的输出:

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

没问题,我想:我打赌我可以使用flexbox使它更干净地包裹,以便第二行超过第一行,使它看起来像是在用户的第一行"后面",如下所示:

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

这并不完美,但它也不错,它模仿Tab控件在Windows中的作用.

所以我修改了几行flex CSS并且达到了我需要做的就是添加任何指定行从下到上的flexbox属性,然后我就完成了.我得到了这个:

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

当然,规范说横轴与写入方向匹配(链接到W3C规范).然后我意识到我无法添加writing-mode: horizontal-bt以使其自下而上,因为writing-modeCSS中没有这样的(链接到W3C规范).

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

(可能的hacky解决方案:我想我可以使用CSS转换来翻转容器然后翻转其中的元素,但这似乎是一个应该"只是工作"的警察.)

那么有没有人对如何让flexbox包装行以使得横轴与写入模式中指定的相反方向有任何好的想法？它甚至可能吗？

---

(可以在这里找到JSFiddle示例:https://jsfiddle.net/seanofw/Lk9wyL9s/ )

Answer 1

尝试:

flex-flow: row wrap-reverse

修改小提琴

5.2.Flex Line Wrapping:flex-wrap 属性

该flex-wrap属性控制Flex容器是单线还是多线,以及横轴的方向,它决定了新线的堆叠方向.

nowrap

flex容器是单行的.

wrap

flex容器是多行的.

wrap-reverse

与换行相同.

对于不是的值,wrap-reverse交叉启动方向相当于当前写入模式的内联开始或块开始方向(以交叉轴中为准),而交叉方向与交叉方向相反-开始.

当flex-wrap是wrap-reverse,交叉开始和横端方向被交换.

_{(重点补充)}