Flex 子元素高度塌陷

原创 uptown 随笔 Css 295阅读 2018-08-15 00:32:35 举报

先看看页面整体布局:
· wrap 弹性布局,分 head、main;
· head 弹性布局,分 h2、i ;
问题:head 高度塌陷。高 32px,变成:24.03px(PS里:chrome是23px,IE是24px)。

说明:以下任意情况,head 都不会高度塌陷的:

A)、main内容高度不超出,

B)、head 不使用弹性布局(去掉 flex)。

看到这里,很多也许会说,那 head 不用 flex 不就得了。没错,毕竟还有浮动大法、绝味九剑、table神掌等一大堆神功能用!但是,嫌苹果不耐摔,又用回诺基亚的做法,朕实在办不到。没办法,太,较真,天生要强!

闲话少说,来分析一下!!

先读读上面的说明,来找突破口:1-main内容高度不超出,这个不能动!
2-head 不使用弹性布局,可以从这里试试。

1、既然使用 head 不使用 flex 高度不坍塌,那在外层加一个div,会怎样呢?!

行了!
给手机贴了个膜,能防摔了,但是,能不能不贴膜,把屏幕做坚固点呢?!

2、于是,把 flex 的文档再翻出来,当我翻到 flex-shrink 时,读到了这样一行字:
    如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。

空间不足,对啊,不就是因为 main 内容超出了,才挤压到 head 高度。

打个不恰当的比喻:
一家人分食披萨,假设披萨一共六块,爸妈默认一人只吃一块(flex-grow:0),父母宠爱儿子,大部分都给儿子(flex-grow:1)吃,儿子小吃的饱饱的,一家人和和美美。
但随着儿子的成长,成家生子,儿子一家四块不够吃了,还要吃爸妈那一份!那,怎么办呢?
如下例:

这样,立一个新规矩:优先保障爸妈的那一份,剩余的再让儿子家吃!

这个优先级,在 flex 的属性就是flex-shrink,默认是1,越小代表越高。 负值无效。
也就是爸妈优先级设为最高:flex-shrink:0,儿子默认:flex-shrink:1

高宽保障的优先级:flex-shrink:0 > flex-grow:max > flex-grow:min

所以,最优解决方案:

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复