Css 使flexbox将行倒置

Css 使flexbox将行倒置,css,flexbox,Css,Flexbox,今天我在看我构建的“Tabs”HTML gizmo,我注意到,由于我使用内联块来布局选项卡标题,当它们包装时,我会得到如下输出: +-------+ +--------+ +--------+ +------+ +------------+ +-----+ | Apple | | Banana | | Cherry | | Date | | Elderberry | | Fig | +-------+ +----------+ | Grape | | Hone

今天我在看我构建的“Tabs”HTML gizmo,我注意到,由于我使用内联块来布局选项卡标题,当它们包装时,我会得到如下输出:

+-------+ +--------+ +--------+ +------+ +------------+ +-----+ | Apple | | Banana | | Cherry | | Date | | Elderberry | | Fig | +-------+ +----------+ | Grape | | Honeydew | --+ +-------------------------------------------------------------- +-------+ +----------+ | Grape | | Honeydew | +-------+ +--------+ +--------+ +------+ +------------+ +-----+ | Apple | | Banana | | Cherry | | Date | | Elderberry | | Fig | --+ +-------------------------------------------------------------- 当然,规范中说横轴与写入方向匹配()。然后我意识到我不能添加
写入模式:水平bt
使其从下到上,因为CSS()中没有这样的
写入模式

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

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

那么,对于如何让flexbox包装行,使横轴与书写模式中指定的方向相反,有人有什么好主意吗?有可能吗


(可在此处找到要使用的JSFIDLE示例:)

尝试:

flex-flow: row wrap-reverse

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

nowrap

flex容器是单行的

wrap

flex容器是多行的

wrap reverse

和包裹一样

对于非
反向换行
的值,交叉起始方向为
等效于的内联开始或块开始方向
当前写入模式(以横轴中的为准)和
交叉结束方向与交叉开始方向相反

flex wrap
wrap reverse
时,交叉起点和交叉终点方向将互换。

(增加重点)


好吧,我会倒霉的。我有一个非常不同的概念,包装反向应该做什么,并错过了规范中强调的一行。竖起大拇指,回答接受。