• 弹性盒子 Flex 子元素高度塌陷


    数据来源:https://blog.csdn.net/sinat_36539161/article/details/81663971

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>flex</title>
        <style>
            .wrap{ width: 600px; height:600px; margin: 10px auto;border:1px solid #ddd;}
            .head{ height: 32px;line-height: 32px;padding-left:6px;padding-right:6px;align-items: center;border-bottom: 1px solid #ddd;}
            .head h2{font-size: 16px;}
            .main{overflow: auto;}    
            .icon{display: inline-block;width: 16px;height: 16px;margin-right: 3px;}    
            .flex,.flexCol{ display: flex;}
            .flexCol{flex-direction: column;}
            .flex_item{flex-grow: 1}
        </style>    
    </head>
    <body>        
        <div class="wrap flexCol">
            <div class="headflex">
                <h2 class="flex_item">head</h2>
                <i class="icon" style="background: url(https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/global/img/rrecom_icon_e34d796.png) 0 -20px no-repeat;"></i>
            </div>
            <div class="main flex_item">
                <div style="height: 800px;">
                    内容区域
                </div>
            </div>
        </div>
    </body>
    </html>
    

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

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

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

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

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

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

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>flex</title>
        <style>
            .wrap{ width: 600px; height:600px; margin: 10px auto;border:1px solid #ddd;}
            .head{ height: 32px;line-height: 32px;padding-left:6px;padding-right:6px;align-items: center;border-bottom: 1px solid #ddd;}
            .head h2{font-size: 16px;}
            .main{overflow: auto;}    
            .icon{display: inline-block;width: 16px;height: 16px;margin-right: 3px;}    
            .flex,.flexCol{ display: flex;}
            .flexCol{flex-direction: column;}
            .flex_item{flex-grow: 1}
        </style>    
    </head>
    <body>        
        <div class="wrap flexCol">
            <div>
                <div class="head flex">
                    <h2 class="flex_item">head</h2>
                    <i class="icon" style="background: url(https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/global/img/rrecom_icon_e34d796.png) 0 -20px no-repeat;"></i>
                </div>
            </div>
            <div class="main flex_item">
                <div style="height: 800px;">
                    内容区域
                </div>
            </div>        
        </div>
    </body>
    </html>
    

    行了!

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

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

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

    打个不恰当的比喻:

    一家人分食披萨,假设披萨一共六块,爸妈默认一人只吃一块(flex-grow:0),父母宠爱儿子,大部分都给儿子(flex-grow:1)吃,儿子小吃的饱饱的,一家人和和美美。

    但随着儿子的成长,成家生子,儿子一家四块不够吃了,还要吃爸妈那一份!那,怎么办呢?

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>flex</title>    
    </head>
    <body>    
        <div style=" 600px; height: 30px; display: flex;">
            <div style=" 100px; background: black; color: #fff"></div>
            <div style=" flex-grow:1; background: green;color: #fff"><div style=" 500px;">儿子一家</div></div>
            <div style=" 100px; background: red;color: #fff"></div>
        </div>
    </body>
    </html>
    

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

    这个优先级,在 flex 的属性就是flex-shrink,默认是1,越小代表越高。 负值无效。

    也就是爸妈优先级设为最高:flex-shrink:0,儿子默认:flex-shrink:1

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>flex</title>    
    </head>
    <body>    
        <div style=" 600px; height: 30px; display: flex;">
            <div style=" 100px; background: black; color: #fff;flex-shrink:0"></div>
            <div style=" flex-grow:1; background: green;color: #fff"><div style=" 500px;">儿子一家</div></div>
            <div style=" 100px; background: red;color: #fff;flex-shrink:0"></div>
        </div>
    </body>
    </html>
    

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

    所以,最优解决方案:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>flex</title>
        <style>
            .wrap{ width: 600px; height:600px; margin: 10px auto;border:1px solid #ddd;}
            .head{ height: 32px;line-height: 32px;padding-left:6px;padding-right:6px;align-items: center;border-bottom: 1px solid #ddd;}
            .headh2{font-size: 16px;}
            .main{overflow: auto;}    
            .icon{display: inline-block;width: 16px;height: 16px;margin-right: 3px;}    
            .flex,.flexCol{ display: flex;}
            .flexCol{flex-direction: column;}
            .flex_item{flex-grow: 1}
        </style>    
    </head>
    <body>
     
        <div class="wrap flexCol">        
            <div class="headflex" style="flex-shrink: 0">
                <h2 class="flex_item">head</h2>
                <i class="icon" style="background: url(https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/global/img/rrecom_icon_e34d796.png) 0 -20px no-repeat;"></i>
            </div>    
            <div class="main flex_item">
                <div style="height: 800px;">
                    内容区域
                </div>
            </div>        
        </div>    
    </body>
    </html>
    
    --------------------- 
    作者:唐鹏程 
    来源:CSDN 
    原文:https://blog.csdn.net/sinat_36539161/article/details/81663971 
    版权声明:本文为博主原创文章,转载请附上博文链接!
    时光如白驹过隙,匆匆而已。
  • 相关阅读:
    前端 CSS
    前端 HTML
    前端 JavaScript 初识
    网络编程——线程池
    网络编程——同一进程中的队列(多线程)
    网络编程——进程间的共享内存
    vue实现前端简易版模糊查询
    封装axios请求拦截器
    关于node中 mysql Client does not support authentication protocol requested by server; consider upgrading MySQL client 解决方法
    封装一个时间方法
  • 原文地址:https://www.cnblogs.com/yupixiu/p/10320533.html
Copyright © 2020-2023  润新知