1、用得少并不代表没用
至少，在我接触过的这么多项目中，我还没有看到任何使用CSS的方向属性进行实际开发的。
为什么？ 是因为方向看起来很难看吗？
虽然方向确实很丑，但 CSS 并不是一个充满滑稽面孔的世界。
是因为兼容吗？
事实并非如此，在那个“美女”都是帅哥的时代，包括IE6在内的浏览器，早就支持CSSdirection了。
ChromeSafariFirefoxOperaIEAndroidiOS
2.0+
1.3+
任何
9.2+
5.5+
任何
3.1+
原因是什么？
原因是我这篇文章写得太晚了！
CSSdirection属性简单易记，属性值少，兼容性好。 关键时候省心又省力。 是时候向你宣传一下了，别埋没了别人的特长。
2.CSS方向介绍
基本上，您只需要关心以下两个属性值：
direction: ltr; // 默认值direction: rtl;
其中ltr为初始值，表示left-to-right，表示从左到右。 更具体的描述一下，内联内容是按照从左到右的顺序排列的，这就是我们平时处理网页的方式，比如前后两张图片，默认情况下，显示在前面的是DOM的图片正确的。
rtl是另一个值，是right-to-left的缩写，意思是从右到左，接下来详细描述一下，就是内联内容按照从右到左的顺序排列。 如果添加这个CSS声明，则前后两张图片，默认情况下，左边显示DOM在前的一张； 它位于容器的右端。
例如mm1是张含韵css向左浮动，DOM结构如下：
结果，张梅子移到了最左边css向左浮动，而不是一侧。 同时，看起来容器是右对齐的，如下截图所示：
仅改变内联元素块的左右顺序
需要注意的是，当direction属性的值为rtl时，我们文本的顺序保持不变，例如：
span1 span2
结果span1仍然在左边，span2在左边：
因为只改变了行内元素块的左右顺序，所以所有文本，即使用行内标签分隔，实际上也是一个同质的行内包，被视为一个整体。 因此，只有近似右对齐才有效果，而具体来说，每个字符的左右顺序没有变化。
那么什么是“行内元素块”？包括被替换的元素，比如
、、、等，或内联块级元素。 因此，在上面的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表示左，当direction的值为rtl时，start表示右。
3、CSS方向实际应用
CSSdirection允许我们在不改变DOM顺序的情况下改变元素的顺序，这在某些场景下非常有用。
这是我实际遇到的一个例子：
基本上，PC页面项目中都有一个Panel或Dialog组件，就是弹框。 其中，下方会有“确定”和“取消”按钮，如下图所示：
然后，很奇怪的是，有几个Dialog，设计时希望这两个键的顺序颠倒过来。
如果只是上图的需求，如果想改变按钮前后的顺序，虽然只需要使用float，但是所有按钮都是float:right：
.button { float: right; }
这并不难。 但是，如果说我们的弹出按钮显示在中间，例如Koko：
别说漂浮了，就是飞行也满足不了需求。 难道要再次请教万能的JS改变DOM顺序吗？
别傻了，一行CSSdirection:rtl十几个字母，就可以安心回家了。 我可以向你保证，这一定是最划算的方式！
当然，我们还有其他的解决方案，但是兼容性，咳咳~
.container, .button { transform: scaleX(-1); }
即父容器和按钮同时水平翻转。 IE7和IE8可以使用IE的flip滤镜来尝试，好像是flipX。 我曾经写过一篇文章：《CSS垂直翻转/水平翻转提高网页资源复用》，幸运的是我看了一下，原来是flipH，完整的写法：
filter: FlipH;
不过，我不确定是否支持过滤器内的过滤器，也没有兴趣去测试那些占粪坑不拉屎的浏览器。 如果你有兴趣，可以自己尝试一下。
4。结论
其实方向属性不太受关注，因为……我想了一下，或者是因为你没有看到今天像这篇文章那样分析和介绍方向的文章，会让很多朋友，即使他们的鼻子扫了一眼它，他们仍然认为是那种嘶嘶声上个世纪在嘶嘶声角落里被淘汰的css属性，实际上是人才被埋没了。
CSSdirection还有一个近亲，writing-mode，它比direction复杂和有趣得多。 我会尽力在年底之前向大家介绍它。
以上，欢迎交流！
扫一扫关注，与您同行，我们走得更远。
发表评论