1.兼容性
flex布局在pc端,移动端,小程序等都可以使用,但是针对各个浏览器有兼容性问题,主要是IE浏览器的兼容性问题,IE浏览器版本需要IE9以上才能使用flex布局
2.垂直方向的布局属性失效
当盒子的高度不确定(由内容的高度把盒子挤开时),即不设置盒子的高度时,此时不适合使用flex布局
应用场景:
如上图所示:
当我们的列表项不确定有多少个时 ,我们就不能给父盒子设置高度,因为flex布局在父盒子没有确定的高度时,垂直方向的属性会失效(没有效果),
例如给列表父盒子设置下列属性会失效的:
flex-direction: column;
justify-content: space-between;
这时我们就需要使用magin和padding等实现上图效果
3.案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
ul {
background: pink;
display: flex;
flex-direction: column;
justify-content: space-between;
}
li {
margin-top: 10px;
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
浏览器中
可以看到ul标签的justify-content: space-between并没有生效
4.总结
flex布局的优点特别多,使用flex布局和定位能快速完成布局效果,也是我们开发页面时最常用的技术,但是felx布局对IE版本9以下有兼容性的问题和当父盒子没有设置高度时在垂直方向无法使用flex布局