最近我在做一个诗词类的小程序：《诗词屋》，已经上线。因为古文有从上到下，从右到左阅读和书写的习惯，所以我设计了一个摘录页面，如下：
整体布局就是按照古代人阅读习惯来的，有点韵味。但是我们如何实现上面那种垂直布局呢？
模板文件如下：
<viewclass="mod-text"><text>窗前明月光</text><text>疑是地上霜</text></view>
那样式该如何写呢？看需求应该和方向或者书写模式有关。也就是CSS中的 writing-mode。
这个属性比较生僻，在一般业务中很少遇到，如果没有见过也不容易想到。它的语法：
/* Keyword values */writing-mode:horizontal-tb;writing-mode:vertical-rl;writing-mode:vertical-lr;/* Global values */writing-mode:inherit;writing-mode:initial;writing-mode:unset;
初始值是：horizontal-tb。从字面意思我们也应该能猜到什么意思，比如：vertical-rl，就是垂直方向从上到下，水平方向从右到左。
预期表现：
从上图，我们应该能看出，使用 vertical-xx 基本可以实现我们的效果,那我们应该使用哪个呢？
先使用vertical-lr貌似这个接近我们的预期从左向右。那我们该把这个属性放在哪个元素上呢？从它的定义来看，它可以决定子元素的排列方向，那应该放到父元素上即.mod-text
wxss如下：
.mod-text{writing-mod:vertical-rl;}
可是效果并不是我们期望的：
如果想不到此时的布局流向，你可以多加一些字：
如果还是别扭，你可以向右歪脖子或旋转图片：
定高是可以实现，但古诗一句的字数是不等的，貌似不够灵活。
仔细想想，我们只要使每一句的古诗占据一列不就行了吗？回忆一下在水平排列时，如何使元素占据一行？就是使元素块级化不就行了。
.mod-text text{display:block;}
这就达到了预期的效果：
明天继续说一下另一种解法，如果你有好的方法，可以留言！
