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