x
1
2
<html>3
<head>4
<meta charset="utf-8">5
<title>蜜蜂教程(mifengjc.com)</title>6
<style>7
#main {8
width: 400px;9
height: 150px;10
border: 1px solid #000000;11
display: flex;12
justify-content: space-around;13
}14
15
#main div {16
width: 70px;17
height: 70px;18
}19
</style>20
</head>21
<body>22
23
<div id="main">24
<div style="background-color:coral;"></div>25
<div style="background-color:lightblue;"></div>26
<div style="background-color:khaki;"></div>27
<div style="background-color:pink;"></div>28
</div>29
<p>点击“尝试一下”按钮，设置 justifyContent 属性的值为 "space-between"。</p>30
<button onclick="myFunction()">尝试一下</button>31
<script>32
function myFunction() {33
document.getElementById("main").style.justifyContent = "space-between";34
}35
</script>36
<p><b>注意：</b>Internet Explorer、Firefox 和 Safari 不支持 justifyContent 属性。</p>37
38
</body>39
</html>