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