Flex 子元素高度塌陷
先看看頁面整體佈局：
· 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="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;}
.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>