关于css:与-Taro-团队核心开发兼运营的一次-CSS-布局讨论的记录

明天下班在很认真的寻访候选人，查看招聘网站上的一些人选的信息时，忽然收到 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 上都有，次要就是管制文本的书写方向。

<div class="demo">
    <div class="box">
        <div class="list" id="list">
            <div class="item">item_01</div>
            <div class="item">item_02</div>
            <div class="item">item_03</div>
            <div class="item">item_04</div>
            <div class="item">item_05</div>
            <div class="item">item_06</div>
            <div class="item">item_07</div>
            <div class="item">item_08</div>
            <div class="item">item_09</div>
        </div>
    </div>
    <div class="box">002</div>
    <div class="box">003</div>
</div>

.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);
}

再来一个最终成果看看吧。

demo 地址：http://lab.tianyizone.com/demo/writing-mode-layer.html