使flexbox上下颠倒地包装行 [英] Make flexbox wrap rows upside-down

问题描述

今天，我正在看我构建的标签" HTML小控件，并且我注意到，由于我使用内联块来布局选项卡标题，因此当它们包装时，我会得到看起来很像的输出像这样:

Today I was looking at a 'Tabs' HTML gizmo that I'd built, and I noticed that since I was using inline-block to lay out the tab headers, when they wrapped, I'd get output that looked something like this:

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

没问题，我想:我敢打赌，我可以使用flexbox使其包裹得更干净，以便第二行位于第一行的上方，这样它看起来就好像在第一行的后面"一样给用户，就像这样:

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 |
--+       +--------------------------------------------------------------

这并不完美，但也不错，它模仿了Windows中的Tab控件.

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

因此，我整理了几行flex CSS，然后要做的就是添加flexbox属性，该属性指定了从下到上的行，然后就可以了.我明白了:

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;
}

当然，该规范说横轴与书写方向匹配(链接到W3C规范).

The spec, of course, says that the cross-axis matches the writing direction (link to W3C spec). And then I realized that I couldn't add writing-mode: horizontal-bt to make it go bottom-to-top because there is no such writing-mode in CSS (link to W3C spec).

我意识到对以反向行顺序换行的段落的需求不大，但这似乎偶尔会有用，并且在规范中似乎并不存在.

I realize that there's not a lot of demand for paragraphs that wrap in reverse row order, but this seems like a thing that's occasionally useful, and doesn't seem to exist in the spec.

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

(Possible hacky solution: I suppose I could use CSS transforms to flip the container and then flip back the elements within it, but that seems like a cop-out for something that should "just work.")

那么，有人对如何使Flexbox包裹行以使横轴与书写模式中指定的轴在相反方向上有什么好主意吗?甚至有可能吗?

So does anybody have any good ideas on how you might get flexbox to wrap rows such that the cross-axis goes in the opposite direction of that specified in the writing-mode? Is it even possible?

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

推荐答案

尝试:

flex-flow: row wrap-reverse

修订的小提琴

5.2.Flex Line Wrapping: flex-wrap 财产

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

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

flex容器是单行.

The flex container is single-line.

包装

flex容器是多行的.

The flex container is multi-line.

自动换行

与包装纸相同.

对于不是 wrap-reverse 的值，交叉开始方向等效于的内联开始或块开始方向当前的书写模式(以横轴为准)和交叉末端方向是交叉起始的相反方向.

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.

当 flex-wrap 为 wrap-reverse 时，交叉起点和交叉终点方向会互换.

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

_(强调)

这篇关于使flexbox上下颠倒地包装行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！