先看看頁面整體佈局:
· 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>