在許多使用場景下，會有讓列表內元素豎着排列，高度不夠，縱向換行的需求。本文教你如何實現一個豎着的元素排列。
最終效果
實現效果
實現效果動圖
實現方法
實現元素縱向排列主要靠 css 的 writing-mode 屬性和 float 屬性。
writing-mode屬性定義了文本水平或垂直排布以及在塊級元素中文本的行進方向。
設置 writing-mode 值為 vertical-lr, 可以使所有子元素縱向排列。
添加 writing-mode: vertical-lr; 后
此時發現里面的子元素仍舊是橫向排列，但文字變縱向了
再加上 float: left; 讓元素左排。
再加 float: left; 后
此時，元素已經變成縱向排列了，但由於未限制高度，元素將無限向下排列。同時子元素的文字排列方式也變成了縱向。
在給列表加一個高度。並重新設置子元素 writing-mode 屬性便可解決
完成效果
此時效果已經完成，但還有一個奇怪的問題
奇怪的效果
在添加到某個位置元素直接會跳到這列最后一個，不知這個問題為何會產生，但是在給子元素添加一個寬度后，bug 便神奇的好了。。
兼容性
| Chrome | Edge | Firefox | IE | Opera | Safari | |
|---|---|---|---|---|---|---|
| Basic support | 48✔️ | 12✔️ | 41 ✔️ | 9✔️ | 15✔️ | 5.1✔️ |
| lr, lr-tb, rl, rl-tb, tb, and tb-rl | 48✔️ | 12✔️ | 43 ✔️ | 9✔️ | ✔️ | ❓ |
| horizontal-tb, vertical-lr, and vertical-rl | ✔️ | ❌ | 43 ✔️ | ❌ | ✔️ | ❓ |
| sideways-lr and sideways-rl | ❌ | ❓ | 43 ✔️ | ❌ | ❌ | ❓ |
總結: writing-mode 是一個很長久的 css 屬性了，新的值 vertical-lr 在大部分現代瀏覽器都已支持，在古老的 ie9 以下，也可用 lr 代替,所以這種實現方式是可兼容的。只是注意某些瀏覽器需要 --webkit- 或 --ms- 前綴。
完成代碼(Angular 示例)
作者：Zhzxang
鏈接：https://www.jianshu.com/p/600abe973dee
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。