flex和box、flexbox高度自适应常见坑

最新推荐文章于 2025-06-07 10:00:00 发布

weixin_34087301

最新推荐文章于 2025-06-07 10:00:00 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/linsk1998/blog/1813513

本文介绍如何使用 CSS 的 flexbox 布局实现容器内元素的高度自适应，并解决常见兼容性问题。通过具体实例，展示了 flexbox 在不同浏览器上的应用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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