CSS direction属性简介与实际应用

一、用的少并不代表没有用

包括IE6在内的浏览器，CSS direction就已经被支持。

ChromeSafariFirefoxOperaIEAndroidiOS2.0+1.3+Any9.2+5.5+Any3.1+

CSS direction属性简单好记，属性值少，兼容性好，关键时候省心省力，是时候给大家宣传宣传，不要埋没了人家的特殊技能。

二、CSS direction简介

基本上，大家只要关心下面这两个属性值就好了：

direction:ltr;  // 默认值

direction:rtl;

其中，ltr是初始值，表示left-to-right，就是从左往右的意思，再具体描述下，就是内联内容是从左往右依次排布的，我们平时网页的处理都是这样的，比方说前后两个图片，默认情况下，DOM在前的就显示在左边。

rtl则是另外一个值，right-to-left缩写，就是从右往左的意思，再具体描述下，就是内联内容是从右往左依次排布的，加入应用了这个CSS声明，则前后两个图片，默认情况下，DOM在前的就显示在右侧；而且是在容器的右端。

例如mm1是张含韵，DOM结构如下：

<pclass="rtl">

  <imgsrc="mm1.jpg"/>

  <imgsrc="mm2.jpg"/>

</p>

结果，张妹子跑到了最右边，而不是左边，同时，貌似右对齐容器了。

改变的只是内联元素块的左右顺序

需要注意的是，当direction属性的值是rtl的时候，我们的文字的前后顺序是不变了，例如：

<p class="rtl"><span>span1</span> <span>span2</span></p>

结果，还是span1在左边，span2在右边：

因为改变的只是行内块的左右顺序，所有的文字，即使使用内联标签分隔，实际上，还是一个同质内联盒子，是当作一个整体处理的，因此，只有近似右对齐效果，而具体每个文字都没有左右顺序的变化。

那什么是“行内块”呢？包括替换元素(replaced element)，如<img>, <button>, <input>, <video>, <object>等，如果不是行内块元素加上display:inline-block样式即可实现此效果。因此，上面span1, span2的例子，只有任意一个span设置display:inline-block，都会看到左右顺序的变化

在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。

提示 ：如果是你仅仅是想修改DOM的先后而不改变其他顺序你可以通过text-align属性来进行修改。

三、CSS direction实际应用

CSS direction可以让我们不改变DOM前后顺序的情况下，调换元素的前后顺序，在有些场景下非常有用。

下面是我真实遇到的例子：

基本上，做PC页面项目里都有一个Panel或者Dialog组件，就是弹框什么的。其中，下面会有“确定”，“取消”按钮，如下截图：

然后，具体很奇怪的，有几个Dialog，设计希望这两个按钮顺序是相反的。

如果只是上图的需求，想要改变按钮前后顺序变换其实只要使用浮动就可以了，所有按钮都float:right：

.button { float: right; }

这个不难。但是，假如说我们的弹框按钮是居中显示的，例如，科科：

别说浮动了，飞动都满足不了需求，是不是又要求助万能的JS了，去改变DOM顺序？

别傻了，一行CSS direction:rtl十几个字母，包你省心到家。我敢打包票，这一定是性价比最高的方法！

当然，我们还有其他解决思路，不过兼容性嘛，咳咳~

.container, .button { transform: scaleX(-1); }

就是父级容器和按钮同时水平翻转，IE7,IE8倒是可以使用IE的翻转滤镜试试，好像是flipX，我以前有写过文章：“CSS垂直翻转/水平翻转提高web页面资源重用性”，还好看了下，原来是flipH，完整写法：

filter: FlipH;

不过，滤镜内再滤镜是否支持，我就不确定了，而且我也没兴趣对这些占着茅坑不拉屎的浏览器做测试，大家有兴趣可以自己试试看。

四、结束语

实际上direction属性关心的少，是因为……我想了想，还是因为大家没今早看到想本文这样分析介绍direction的文章，会让很多小伙伴，即使眼睛瞟到了，也认为是那个嘎吱角落的上世纪淘汰的CSS属性，实际上，人才被埋没了。

CSS direction还有一个近亲writing-mode，可比direction复杂的多，也有意思的多，争取月底前也给大家介绍下。

以上，欢迎交流！

五、代码展示