神奇的writing-mode

writing-mode是干什么的？

首先看一下 MDN 对 writing-mode 的解释。

writing-mode 属性定义了文本水平或垂直排布以及在块级元素中文本的行进方向。 也就是说 writing-mode 不仅会影响文本的排版，元素的排版也会随之改变。包括 flex布局、grid布局、float浮动 等等……

writing-mode在文本排布中的使用

.box {
  /* 横排-从上到下 */
  writing-mode: horizontal-tb;
}

<div class="box">这是一段较长的文本</div>

.box {
  /* 竖排-从右到左 */
  writing-mode: vertical-rl;
}

.box {
  /* 竖排-从左到右 */
  writing-mode: vertical-lr;
}

writing-mode对布局的影响

writing-mode 会直接改变 block元素和 inline-block元素 的排版方向

.box {
  /* 竖排-从左到右 */
  writing-mode: vertical-lr;
}

<div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <span>3</span>
    <span>4</span>
</div>

.box {
  /* 竖排-从右到左 */
  writing-mode: vertical-rl;
}

同样 writing-mode 会改变 flex布局 的排版方向

.box {
    display: flex;
    flex-direction: row;
    writing-mode: vertical-lr;
}

<div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>

.box {
    display: flex;
    flex-direction: column;
    writing-mode: vertical-lr;
}

.box {
    display: flex;
    flex-direction: column;
    writing-mode: vertical-rl;
}

我们可以看到因为将 writing-mode 改成了vertical所以flex布局的row变成竖排column变成了横排。

grid布局 同样会有这样的效果,这里就不放demo了。

float浮动 的left和right也从左右变成上下了。

.item {
    float: left | right;
}

将 writing-mode 设置成vertical后块级元素从占据其父元素（容器）的整个水平空间，变成了占据其父元素（容器）的整个垂直空间。元素的宽度将取决于其内容宽度。

<div class="box">
    <div class="item">文字</div>
</div>

.box {
    writing-mode: horizontal-tb | vertical-lr;
}

总结

很显然 writing-mode 非常强大。它能改变整个html文档的排布方式。 除了上面这几个例子 writing-mode 还能配合 column-count 等高级属性做出一下意想不到的布局效果。

writing-mode 甚至能把input和textarea变成垂直的。

以后面试官再问css的垂直居中，除了那些常用的居中方式你还可以说 writing-mode 设置成 vertical 再 text-align: center 。

你get到了吗？