使flexbox包裝行倒置

今天我正在查看我製作的「Tabs」HTML gizmo，並且我注意到由於我使用內嵌塊佈置了標題標題，所以當它們包裝時，我倒是拿到看起來是這樣的輸出：使flexbox包裝行倒置

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

沒問題，我想：我敢打賭，我可以用Flexbox，就讓它包裝更乾淨，讓第二排去以上第一，使其看起來像是在用戶的第一行「後面」，如下所示：

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

這並不完美，但也不錯，它也模仿了Windows中Tab控件的功能。

所以我砍了幾行flex CSS，並且到了所有我必須做的事情就是添加flexbox屬性，指定行從底部到頂部，然後我就完成了。我得到這個：

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 （link to W3C spec）中沒有這樣的writing-mode。

我意識到，對於按逆行排序的段落沒有太多的需求，但這看起來像是偶爾有用的東西，似乎並不存在於規範中。

（可能哈克解決方案：「只是工作」我想我可以使用CSS變換來翻轉容器內，然後它翻回的元素，但是，似乎是一種逃避的東西，應該）

那麼有沒有人有什麼好的想法，你可以如何讓flexbox包裝行，使cross-axis在相反方向的寫作模式中指定？它甚至有可能嗎？

（例如的jsfiddle一起玩的可以在這裏找到：https://jsfiddle.net/seanofw/Lk9wyL9s/）

來源

2016-06-17 Sean Werkema

嘗試：

flex-flow: row wrap-reverse

Revised Fiddle

5.2. Flex Line Wrapping: the flex-wrap property

的flex-wrap屬性控制所述柔性容器是否是單行或多行，和交軸的方向，其確定新線條重疊的方向。

nowrap

的柔性容器是單線的。

wrap

柔性容器是多線。

wrap-reverse

同包裝。

對於不wrap-reverse的值，交叉開始方向相當於任電流寫入模式（取在橫軸）的直列開始或塊起動方向和橫結束方向是交叉開始的相反方向。

當flex-wrap是wrap-reverse時，交叉開始和交叉方向被交換。

_（強調）

來源

2016-06-17 16:13:25

好吧，我會該死。對於換行應該做什麼，我有一個非常不同的概念，並且錯過了規範中強調的行。豎起大拇指，並接受答案。 –

使flexbox包裝行倒置

回答

相關問題