flex布局极大的提高了我们布局的效率,更简单、灵活。
例如:
1. 之前我们要让一个小盒子在一个大盒子里居中,我们有好几种方法,比如用定位做,子盒子设为绝对定位,父盒子设为相对定位
.box{
position: relative;
width: 400px;
height: 400px;
background-color: pink;
margin: 100px auto;
}
.one{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 150px;
height: 150px;
background-color: yellowgreen;
}
还有好几种就不一一举例了,而下面就是使用flex布局写的盒子居中
<!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>
.father{
width: 500px;
height: 500px;
background-color: pink;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.father .son{
width: 200px;
height: 200px;
background-color: #7a0681;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
这里很明显可以看出,使用flex布局更简洁,盒子设置好后只需要3行代码就能解决.
2.盒子沿水平均匀排列, 空白间距均分在相邻盒子之间,之前我们还要算好每个盒子的宽度和外边距,
而现在只需要给父盒子设置display:flex; justify-content: space-between;就可以.
<!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>
.box{
width: 700px;
height: 300px;
background-color: pink;
margin: 0 auto;
/* 弹性容器 */
display: flex;
/* 主轴对齐方式 两边靠边 中间自适应 */
justify-content: space-between;
}
.box div{
/* 弹性盒子 */
width: 200px;
height: 300px;
background-color: aqua;
}
.box div:nth-child(2n){
background-color: yellow;
}
/* flex布局:弹性布局 */
</style>
</head>
<body>
<div class="box">
<div>a</div>
<div>b</div>
<div>c</div>
</div>
</body>
</html>