【CSS】CSS direction属性简介与实际应用
侵删
一、用的少并不代表没有用
- 至少，在我接触的这么多项目里，没有见到使用过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简介
基本上，大家只要关心下面这两个属性值就好了：
direction: ltr; // 默认值
direction: rtl;
- 其中，
ltr是初始值，表示left-to-right，就是从左往右的意思，再具体描述下，就是内联内容是从左往右依次排布的，我们平时网页的处理都是这样的，比方说前后两个图片，默认情况下，DOM在前的就显示在左边。 -
rtl则是另外一个值，right-to-left缩写，就是从右往左的意思，再具体描述下，就是内联内容是从右往左依次排布的，加入应用了这个CSS声明，则前后两个图片，默认情况下，DOM在前的就显示在右侧；而且是在容器的右端。 - 例如mm1是张含韵，
DOM结构如下：
<p class="rtl">
<img src="mm1.jpg"/>
<img src="mm2.jpg"/>
</p>
- 结果，张妹子跑到了最右边，而不是左边，同时，貌似右对齐容器了，如下截图：
改变的只是内联元素块的左右顺序
需要注意的是，当direction属性的值是rtl的时候，我们的文字的前后顺序是不变了，例如：
<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实际应用
CSS direction可以让我们不改变DOM前后顺序的情况下，调换元素的前后顺序，在有些场景下非常有用。
下面是我真实遇到的例子：
- 基本上，做
PC页面项目里都有一个Panel或者Dialog组件，就是弹框什么的。其中，下面会有“确定”，“取消”按钮，如下截图：
image
-
然后，具体很奇怪的，有几个
Dialog，设计希望这两个按钮顺序是相反的。 -
如果只是上图的需求，想要改变按钮前后顺序变换其实只要使用浮动就可以了，所有按钮都
float:right：
.button { float: right; }
- 这个不难。但是，假如说我们的弹框按钮是居中显示的，例如，
-
别说浮动了，飞动都满足不了需求，是不是又要求助万能的
JS了，去改变DOM顺序？ -
别傻了，一行
CSS direction:rtl十几个字母，包你省心到家。我敢打包票，这一定是性价比最高的方法！ -
当然，我们还有其他解决思路，不过兼容性嘛，咳咳~
.container, .button { transform: scaleX(-1); }
CSS direction还有一个近亲writing-mode，可比direction复杂的多，也有意思的多
下面来自：改变CSS世界纵横规则的writing-mode属性@张鑫旭
本文稍微摘了点知识点，具体的请看原文
writing-mode这个CSS属性IE5.5浏览器就已经支持了，但是在很长一段时间里，FireFox, Chrome这些现代浏览器都不支持writing-mode
然而，就在我们被流行前端技术一叶蔽目的时候，各大现代浏览器纷纷对writing-mode实现了更加标准的支持
一、writing-mode的原本作用
和float属性有些类似，writing-mode原本设计的是控制内联元素的显示的（即所谓的文本布局-Text Layout）。因为在亚洲，尤其像中国这样的东亚国家，存在文字的排版不是水平式的，而是垂直的，例如中国的古诗古文。
垂直古诗
因此，writing-mode就是用来实现文字可以竖着呈现的。
writing-mode语法
原文很多内容，本文就记个实战版本的喽：
writing-mode: lr-tb | tb-rl | tb-lr (IE8+);
writing-mode: horizontal-tb | vertical-rl | vertical-lr;
一些说明：
- 相同的
writing-mode属性值并不会累加，例如父子均设置了writing-mode:tb-rl，只会渲染一次，子元素并不会2次旋转。 - IE浏览器下，一个自身具有布局的元素（不是纯文本之类元素）如果
writing-mode属性值和父元素不同，IE浏览器下，当布局元素从水平变成垂直的时候（举个例子），你就想象为元素在垂直方向是100%自适应父元素高度的。所以，IE浏览器下(不包括IE13+)，元素vertical流的时候会发现高度高的吓人，布局和其他现代浏览器不一样，就是这个原因。 - Chrome浏览器下目前还需要
-webkit-私有前缀，Chrome浏览器从48开始无需私有前缀，虽然Chrome和Opera认识tb-rl等老的IE属性值，但是，仅仅是认识而已，根本不鸟，没有任何效果，聋子的耳朵——摆设！
有同学可能要疑问了，既然
writing-mode实现文本垂直排版场景有限，那还有什么学习的意义呢？
前面也提到了，虽然writing-mode创造的本意是文本布局，但是，其带来的文档流向的改变，不仅改变了我们多年来正常的CSS认知，同时可以巧妙实现很多意想不到的需求和效果。
二、writing-mode不经意改变了哪些规则？
writing-mode将页面默认的水平流改成了垂直流，颠覆了很多我们以往的认知，基于原本水平方向才适用的规则全部都可以在垂直方向适用！（具体内容去原文看吧！）
- 水平方向也能margin重叠
- 可以使用margin:auto实现垂直居中
- 可以使用text-align:center实现图片垂直居中
- 可以使用text-indent实现文字下沉效果
- 可以实现全兼容的icon fonts图标的旋转效果
- 充分利用高度的高度自适应布局
三、writing-mode和*-start属性的流机制
CSS3中出现了诸多*-start/*-end属性（亦称为CSS逻辑属性），例如：margin-start/margin-end, border-start/border-end, padding-start/padding-end, 以及text-align:start/text-align:end声明。
下面问题来了，为什么会蹦出这么多*-start/*-end鬼？
那是因为现代浏览器加强了对流的支持，包括老江湖direction，以及最近年月跟进的writing-mode。
在很久以前，我们的认知里，网页布局就一种流向，就是从左往右，从上往下，因此，我们使用margin-left/margin-right没有任何问题。但是，如果我们流是可以变化的，例如，一张图片距离左边缘20像素，我们希望其文档流是从右往左，同时距离右侧是20像素，怎么办？
此时，margin-left:20px在图片direction变化后，就无效了；但是，margin-start就不会有此问题，所谓start, 指的是文档流开始的方向，换句话说，如果页面是默认的文档流，则margin-start等同于margin-left，如果是水平从右往左文档流，则margin-start等同于margin-right。margin-end也是类似的。
