flex和box、flexbox高度自適應常見坑

display:box; 是老語法，display:flex;是新語法。flexbox是隻有ie10纔有的語法，ie11能夠用flex。

box支持的瀏覽器更多，flex舊版本瀏覽器不支持。

綜合寫法

display:-moz-box; 
display:-webkit-box; 
display:-ms-flexbox;
display:-webkit-flex;
display:flex;

僅僅只有5條，注意：沒有box也沒有-moz-flex和-o-flex

 

說一下高度自適應

如圖上下兩部分，上面部分適應內容的高度，下面部分填充剩餘部分。

當下面內容不夠時，在下面部分出現滾動條

html部分

<div id="all">
	<div id="header">
		<p>123</p>
		<p>123</p>
	</div>
	<div id="main">
		<p>123</p>
		<p>123</p>
		<p>123</p>
		<p>123</p>
		<p>123</p>
		<p>123</p>
	</div>
</div>

CSS部分

*{margin:0;padding:0;}
html,body{height:100%;}
#all{
	width:100%;/*第4個坑*/
	height:100%;
	
	display:-moz-box; 
	display:-webkit-box; 
	display:-ms-flexbox;
	/*display:-webkit-flex;*//*第1個坑*/
	display:flex;
	
	-moz-box-orient:vertical;
	-webkit-box-orient:vertical;
	-ms-flex-direction:column;
	flex-direction:column;
	
	overflow:hidden;/*第2個坑*/
	background:#000;
}
#header{
	overflow:auto;/*用於固定高度的狀況*/
	flex-shrink:0;/*第3個坑*/
	
	background:#fcc;
}
#main{
	overflow:auto;

	display:-moz-box;/*第5個坑*/
	-moz-box-orient:vertical;/*第5個坑*/
	
	-moz-box-flex:1;
	-webkit-box-flex:1;
	-ms-flex:1;
	flex-grow:1;
	
	background:#ccf;
}

1.實際上-webkit-flex的高度適應有問題，不如不要，而後降級成-webkit-box

2.-webkit-box內部內容超出出現滾動條時，實際佔用的體積沒有被截取，致使出現2重滾動條，外層加上overflow:hidden能夠解決。

3.注意頭部份有flex-shrink

flex-shrink屬性指定了flex元素的收縮規則，0表示不可收縮，默認值：1。

可是在flex-grow(box-flex)未設置時，大部分瀏覽器都不可收縮，部分瀏覽器會收縮。因此要設置爲0才能保證兼容。

4.-moz-box不像block，寬度不會佔滿，因此要width:100%

5.在-moz-box中，子元素也要-moz-box才能自適應。爲了看起來像普通的block因此加上-moz-box-orient:vertical。

6.在-moz-box中，內部只能繼續box佈局，沒法使用position:absolute，position:absolute定位會相對於文檔。