目前正在用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/