今天上班在很认真的寻访候选人，查看招聘网站上的一些人选的信息时，突然收到 Taro 团队的核心开发兼运营（我说他是开发，他说自己是运营）同学的微信消息，如下图：
文章图片
文章图片
好多人都是长时间没聊了，现在沟通方式多了，反而大家平时沟通却少了。原本我以为他是来找我闲聊几句，顺便会介绍几个朋友给我，让我帮忙推荐岗位呢。我这个小猎头哦，好南啊……
回归正题，当时他问了这个之后，我心中有几个小疑惑还不清楚。毕竟要完成一个需求，至少要了解这个需求的本质是什么，同时会出现的一些问题有哪些。
所以，看到他的问题，把自己所理解的一个最终效果描述一下，大概就是这样，容器盒子会被撑开的，而现在是没有撑开，如图：
文章图片
看到需求，脑子想也没想就冒出了一个“flex 不可以吗”。事后想想，这真的是脑热反应，事实后面也证明了这样的反应往往有时候还是会有问题的。
需求点大概了解了，那么在页面中，还是有一些不可控的因素的，比如内容增加之后会怎么样呢，就像这样：
文章图片
元素内容过多，撑开了盒子之后，相对应的就会破坏了宽度对齐方式。
了解需求，对于可能出现的问题也明白了，接下来就是动手实操了。但，我现在是猎头，不是码农，不应该在上班时间敲代码。可是，这个问题让我心好痒，于是摸个鱼，偷个懒，快速按照自己的 flex 布局设想实操了一把。
结果，就是前面看到的问题情况。先是外层 flex-direction: row;
然后再里面是 flex-direction: column;
，结果 column 的时候，我们设置了 height 才会结合 flex-wrap: wrap;
进行换行的，而且最终多个换行之后，会超出父级元素的范围，但不会撑开父级元素。
对，就是前面他的问题。
于是我想到了使用多列布局的方式，尝试了一下，嗯，的确是可行的。但又有一个问题来了，使用 -wekbit-column-count: 2;
是能满足 2 列的时候，那么当里面的子元素有三列的时候怎么办呢？难道用 JS 去计算？显示不合理啊。
文章图片
嗯，好吧，的确暂时没有好的想法。
不过，没多久，他发了一条消息给我，说搞定了，丢了一个 url 地址给我。打开一看，啊呀，我怎么就没想到 writing-mode 这个属性呢，前面整 flex 的时候还想到了 direction，结果把 writing-mode 给忘了。
晚上结合那个 demo，简化了一下，顺带记录一下。对于 writing-mode 就不扩展开来讲了，MDN 上都有，主要就是控制文本的书写方向。
item_01
item_02
item_03
item_04
item_05
item_06
item_07
item_08
item_09002
003
.box {
display: inline-block;
vertical-align: top;
min-width: 200px;
height: 130px;
margin: 10px;
padding: 15px 20px;
border: 1px solid #bbb;
}
.list {
display: inline-block;
writing-mode: vertical-lr;
}
.item {
display: inline-block;
margin: 5px 10px 10px;
writing-mode: horizontal-tb;
background-color: rgba(255, 0, 0, .5);
}再来一个最终效果看看吧。
文章图片
【与 Taro 团队核心开发兼运营的一次 CSS 布局讨论的记录】demo地址：http://lab.tianyizone.com/demo/writing-mode-layer.html
