css direction 属性简介与实际应用。

目前正在用vue构建组件库。写到弹框的时候没想到按钮的顺序问题，但是在应用中，确实会有选项按钮顺序不同的情况发生，但是又想共用一个组件。那么问题就出现了。后来看到了这篇文章，才茅塞顿开。

direction 属性规定文本的方向 / 书写方向。

该属性指定了块的基本书写方向，以及针对 Unicode 双向算法的嵌入和覆盖方向。不支持双向文本的用户代理可以忽略这个属性。

 

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

兼容性：所有浏览器都支持

direction: ltr;   // 默认值

direction: rtl;

ltr是初始值，表示left-to-right，就是从左往右的意思，就是内联内容是从左往右依次排布的，平时网页前后两个图片，默认情况下，DOM在前的就显示在左边。
rtl则是另外一个值，right-to-left缩写，就是从右往左的意思，就是内联内容是从右往左依次排布的，应用了这个CSS，则前后两个图片，默认情况下，DOM在前的就显示在右侧；而且是在容器的右端。

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

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

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

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

 

3.direction实际应用（组件化开发）

pc项目中的弹框。其中，下面会有“确定”，“取消”按钮，如下截图：

 

有时候需求是希望这两个按钮顺序是相反的。如果只是上图的需求，想要改变按钮前后顺序变换其实只要使用浮动就可以了，所有按钮都float:right：

但是如果需求的弹框按钮是居中显示的

 

 

如果需求的弹框按钮是居中显示的，那么css direction:rtl 就可以直接用css解决问题了。

 

当然还有别的解决方法，但是需要考虑兼容性啥的。

 

参考资料： http://www.zhangxinxu.com/wordpress/2016/03/css-direction-introduction-apply/

转载于:https://www.cnblogs.com/loveTravel/p/9110113.html