js 操作 css align-content属性

编辑代码
<!DOCTYPE html>
<html>
<head>
<style> 
#main {
  width: 140px;
  height: 300px;
  border: 1px solid #000000;
  display: flex;
  flex-flow: row wrap;
  align-content: space-around; 
}

#main div {
  width: 70px;
  height: 70px;
}
</style>
</head>
<body>

<div id="main">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
  <div style="background-color:khaki;"></div>
  <div style="background-color:pink;"></div>
  <div style="background-color:lightgrey;"></div>
  <div style="background-color:lightgreen;"></div>
</div>

<p>点击“尝试一下”按钮，设置 alignContent 属性的值为 "space-between"。</p>

<button onclick="myFunction()">尝试一下</button>

<script>
function myFunction()
{
document.getElementById("main").style.alignContent = "space-between";
}
</script>

<p><b>注意：</b>Internet Explorer、Firefox 和 Safari 不支持 alignContent 属性。</p>

</body>
</html>