css實現元素豎向排列 --- writing-mode
阿新 • • 發佈：2022-03-10
在許多使用場景下，會有讓列表內元素豎著排列，高度不夠，縱向換行的需求。本文教你如何實現一個豎著的元素排列。
最終效果
實現效果
實現效果動圖
實現方法
實現元素縱向排列主要靠 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
來源：簡書
著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。