一、用的少並不代表沒有用
至少，在我接觸的這麼多專案裡，沒有見到使用過CSS direction屬性做實際開發的。
為什麼呢？是因為direction長得醜嗎？
雖然說direction確實其貌不揚，但是CSS並不是一個看臉賣萌的世界。
那是因為相容性嗎？
那更不是了，在那個“美女”確實是美女的年代，包括IE6在內的瀏覽器，CSS direction就已經被支援。
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 2.0+ | 1.3+ | Any | 9.2+ | 5.5+ | Any | 3.1+ |
那究竟是什麼原因呢？
原因就在於我這篇文章寫得太晚了！
CSS direction屬性簡單好記，屬性值少，相容性好，關鍵時候省心省力，是時候給大家宣傳宣傳，不要埋沒了人家的特殊技能。
二、CSS direction簡介
基本上，大家只要關心下面這兩個屬性值就好了：
|
1 2 |
direction: ltr; // 預設值 direction: rtl; |
其中，ltr是初始值，表示left-to-right，就是從左往右的意思，再具體描述下，就是內聯內容是從左往右依次排布的，我們平時網頁的處理都是這樣的，比方說前後兩個圖片，預設情況下，DOM在前的就顯示在左邊。
rtl則是另外一個值，right-to-left縮寫，就是從右往左的意思，再具體描述下，就是內聯內容是從右往左依次排布的，加入應用了這個CSS宣告，則前後兩個圖片，預設情況下，DOM在前的就顯示在右側；而且是在容器的右端。
例如mm1是張含韻，DOM結構如下：
|
1 2 3 4 |
<p class="rtl"> <img src="mm1.jpg"/> <img src="mm2.jpg"/> </p> |
結果，張妹子跑到了最右邊，而不是左邊，同時，貌似右對齊容器了，如下截圖：
改變的只是內聯元素塊的左右順序
需要注意的是，當direction屬性的值是rtl的時候，我們的文字的前後順序是不變了，例如：
|
1 |
<p class="rtl"><span>span1</span> <span>span2</span></p> |
結果，還是span1在左邊，span2在右邊：
因為改變的只是內聯元素塊的左右順序，所有的文字，即使使用內聯標籤分隔，實際上，還是一個同質內聯盒子，是當作一個整體處理的，因此，只有近似右對齊效果，而具體每個文字都沒有左右順序的變化。
那什麼是“內聯元素塊”呢？包括替換元素(replaced element)，如<img>, <button>, <input>, <video>, <object>等，或者inline-block水平的元素。因此，上面span1, span2的例子，只有任意一個span設定display:inline-block，都會看到左右順序的變化。
您可以狠狠地點選這裡：CSS direction屬性與左右順序測試demo
在IE瀏覽器下(至少IE11)，設定direction:rtl會改變容器預設的text-align值，因為IE11在內的瀏覽器（IE11以上版本我尚未測試）都不支援text-align:start/end等CSS3屬性值，而Chrome和FireFox瀏覽器均不會修改text-align值，因為這些瀏覽器的text-align初始值是start，這裡大家也應該或多或少感受到了text-align:start/end這個新宣告的作用和意義了——當direction值為ltr的時候，start就表示left，當direction值為rtl的時候，start就表示right。
三、CSS direction實際應用
CSS direction可以讓我們不改變DOM前後順序的情況下，調換元素的前後順序，在有些場景下非常有用。
下面是我真實遇到的例子：
基本上，做PC頁面專案裡都有一個Panel或者Dialog元件，就是彈框什麼的。其中，下面會有“確定”，“取消”按鈕，如下截圖：
然後，具體很奇怪的，有幾個Dialog，設計希望這兩個按鈕順序是相反的。
如果只是上圖的需求，想要改變按鈕前後順序變換其實只要使用浮動就可以了，所有按鈕都float:right：
|
1 |
.button { float: right; } |
這個不難。但是，假如說我們的彈框按鈕是居中顯示的，例如，科科：
別說浮動了，飛動都滿足不了需求，是不是又要求助萬能的JS了，去改變DOM順序？
別傻了，一行CSS direction:rtl十幾個字母，包你省心到家。我敢打包票，這一定是價效比最高的方法！
您可以狠狠地點選這裡：CSS direction控制居中按鈕順序改變demo
當然，我們還有其他解決思路，不過相容性嘛，咳咳~
|
1 |
.container, .button { transform: scaleX(-1); } |
就是父級容器和按鈕同時水平翻轉，IE7,IE8倒是可以使用IE的翻轉濾鏡試試，好像是flipXflipH，完整寫法：
|
1 |
filter: FlipH; |
不過，濾鏡內再濾鏡是否支援，我就不確定了，而且我也沒興趣對這些佔著茅坑不拉屎的瀏覽器做測試，大家有興趣可以自己試試看。
四、結束語
實際上direction屬性關心的少，是因為……我想了想，還是因為大家沒今早看到想本文這樣分析介紹direction的文章，會讓很多小夥伴，即使眼睛瞟到了，也認為是那個嘎吱角落的上世紀淘汰的CSS屬性，實際上，人才被埋沒了。
CSS direction還有一個近親writing-mode，可比direction複雜的多，也有意思的多，爭取月底前也給大家介紹下。
以上，歡迎交流！
本文為原創文章，會經常更新知識點以及修正一些錯誤，因此轉載請保留原出處，方便溯源，避免陳舊錯誤知識的誤導，同時有更好的閱讀體驗。