使flexbox包装行倒置

Question

今天我正在寻找一个＆＃39; Tabs＆＃39;我构建的HTML小发明，我注意到，因为我使用内联块来布局标题页，当它们包装时，我得到的输出看起来像这样：

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

没问题，我想：我打赌我可以使用flexbox让它更干净，所以第二行在上面第一行，这样看起来就像＃＆＃39; s＆＃ 34;后面＆＃34;用户的第一行，如下所示：

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

这不完美，但它也不错，它模仿了Tab控件在Windows中的作用。

所以我修改了几行flex CSS并且达到了我所要做的就是添加任何指定行从下到上的flexbox属性，然后我就是＆＃39;完成。我得到了这个：

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: horizontal-bt以使其自下而上，因为CSS中没有writing-mode {em>（link to W3C spec）

我意识到对反向排序的段落的要求不是很多，但这似乎是偶尔有用的东西，似乎并不存在于规格。

（可能的hacky解决方案：我想我可以使用CSS变换来翻转容器，然后翻转其中的元素，但这似乎是应该＆＃34;只是工作的问题。＆＃34 ;）

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

（可以在这里找到JSFiddle示例：https://jsfiddle.net/seanofw/Lk9wyL9s/）

Answer 1

尝试：

flex-flow: row wrap-reverse

Revised Fiddle

  

5.2. Flex Line Wrapping: the flex-wrap property

     

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

     

nowrap

     

Flex容器是单行的。

     

wrap

     

Flex容器是多行的。

     

wrap-reverse

     

与wrap相同。

     

对于非wrap-reverse的值，交叉开始方向   相当于inline-start或block-start方向   当前的书写模式（以十字轴为准）和   交叉方向是交叉开始的相反方向。

     

当flex-wrap为wrap-reverse时，交叉开始和跨端方向会互换。

     

_{（强调添加）}