HTML DOM Style justifyContent 属性

htmlweb developmentfront end technology更新于 2024/3/15 2:52:17

HTML DOM justifyContent 属性用于在弹性项目未占用所有可用空间时，沿主轴水平对齐它们。

以下是语法 −

设置 justifyContent 属性 −

object.style.justifyContent = "flex-start|flex-end|center|space-between|space-around|initial|inherit"

以上属性解释如下 −

值	描述
flex-start	此项将项目放置在容器的起始位置，这是默认值。
flex-end	此项将项目放置在容器的末尾。
center	此项将项目放置在容器的中心位置。
space-between	此项设置项目在行与行之间留有空间。
space-around	此项设置项目在行与行之间、行前和行后留有空间。
initial	用于将此属性设置为初始值。
inherit	用于继承父级属性值

让我们看一个 justifyContent 属性的示例 −

示例

<!DOCTYPE html>
<html>
<head>
<style>
   #demo {
      margin: auto;
      width: 400px;
      height: 120px;
      box-shadow: 0 0 0 5px brown;
      display: flex;
      flex-wrap: wrap;
   }
   #demo div {
      padding: 0;
      width: 50px;
      height: 50px;
      border: 5px solid;
      border-radius: 15%;
   }
   #demo div:nth-child(even) {
      border-color: black;
   }
   #demo div:nth-child(odd) {
      border-color: red;
   }
</style>
<script>
   function changeJustifyContent() {
      document.getElementById("demo").style.justifyContent="space-between";
      document.getElementById("Sample").innerHTML="The justify-content property is now set to space    between";
   }
</script>
</head>
<body>
   <div id="demo">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
   </div>
   <p>Change the above container justify-content property by clicking the below button</p>
   <button onclick="changeJustifyContent()">Change Justify Content</button>
   <p id="Sample"></p>
</body>