2019獨角獸企業重金招聘Python工程師標準>>>

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定位會相對于文檔。

?

轉載于:https://my.oschina.net/linsk1998/blog/1813513

總結

以上是生活随笔為你收集整理的flex和box、flexbox高度自适应常见坑的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。