flex主轴对齐方式:
-
justify-content:center;沿着主轴(x轴)居中对齐
-
justify-content:space-between;盒子沿主轴均匀排列, 盒子贴着弹性容器两边显示 中间盒子自适应;
-
justify-content:around;盒子沿着主轴均匀排列,两边盒子边距占空白区域1份,中间盒子占空白区域两份;
justify-content:space-evenly;盒子沿着主轴均匀排列,所有盒子平分空白区域;
侧轴对齐方式:
align-items:center;盒子沿着侧轴居中对齐
圣杯布局代码:
<!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>
* {
margin: 0;
padding: 0;
}
.box {
width: 100%;
height: 44px;
background-color: pink;
display: flex;
}
.left {
width: 40px;
height: 44px;
background-color: red;
}
.center {
flex: 1;
background-color: hotpink;
}
.right {
width: 40px;
height: 44px;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
</html>