先看看页面整体布局:
. 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="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 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 内容超出了, 才挤压到 head 高度.
打个不恰当的比喻:
一家人分食披萨, 假设披萨一共六块, 爸妈默认一人只吃一块 (flex-grow:0), 父母宠爱儿子, 大部分都给儿子(flex-grow:1) 吃, 儿子小吃的饱饱的, 一家人和和美美.
但随着儿子的成长, 成家生子, 儿子一家四块不够吃了, 还要吃爸妈那一份! 那, 怎么办呢?
如下例:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>flex</title>
- </head>
- <body>
- <div style="width: 600px; height: 30px; display: flex;">
- <div style="width: 100px; background: black; color: #fff">爸</div>
- <div style="flex-grow:1; background: green;color: #fff"><div style="width: 500px;">儿子一家</div></div>
- <div style="width: 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="width: 600px; height: 30px; display: flex;">
- <div style="width: 100px; background: black; color: #fff;flex-shrink:0">爸</div>
- <div style="flex-grow:1; background: green;color: #fff"><div style="width: 500px;">儿子一家</div></div>
- <div style="width: 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;}
- .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="head flex" 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>
来源: http://www.qdfuns.com/article/25669/87bd5567ba0af95f5ad0064bf36b7139.html