<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/common.css">
<style>
.box {
margin: 100px auto;
width: 1000px;
height: 500px;
background-color: red;
/* 父元素身上 diaplay:flex */
display: flex;
/* 默认左对齐 */
justify-content: flex-start;
/* 右对齐 */
justify-content: flex-end;
/* 弹性盒子沿主轴居中排列 */
justify-content: center;
/* 弹性盒子沿主轴均匀排列,空白间距分在弹性盒子之间 */
justify-content: space-between;
/* 弹性盒子沿主轴均匀排列,空白间距均分在弹性盒子两侧 */
justify-content: space-around;
/* 弹性盒子沿主轴均匀排列,弹性盒子与容器之间间距相等 */
justify-content: space-evenly;
}
.box1,.box2,.box3 {
width: 200px;
height: 100px;
background-color: #6cdd4c;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
</div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
下面是css文件common.css代码:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style-type: none;
}
a {
text-decoration: none;
}