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

林小志
English

今天上班在很认真的寻访候选人,查看招聘网站上的一些人选的信息时,突然收到 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

阅读 2.5k

“查宿舍”……How To Make Love……
现在博客变专栏了……感觉专栏好像要写很专业的连载的感觉……好怕怕……写的都是很随意的东西,那就选择“转载...
avatar
林小志
《CSS那些事儿》作者、前端开发工程师
3.8k 声望
1.6k 粉丝
0 条评论
avatar
林小志
《CSS那些事儿》作者、前端开发工程师
3.8k 声望
1.6k 粉丝
文章目录
宣传栏