如何使用 JavaScript 对齐 flex 容器中的项目？

在 CSS 中， align-items属性用于对齐 flex 容器中的元素。这可以通过使用选择器方法选择特定元素来使用 JavaScript 类似地实现 然后使用alignItems属性设置对齐方式。这在需要动态设置容器中项目的对齐方式的情况下很有用。

句法：

document.getElementById("elementId")
.style.alignItems="flex-start | flex-end | center"

下面的示例演示了如何使用 JavaScript 对齐项目。

示例 1：在此示例中，项目将与容器的开头对齐。

HTML

  
    
      #flex-container {
        display: flex;
        background-color: #f1f1f1;
        width: 50%;
        height: 250px;
      }
      #flex-container > div {
        background-color: rgb(33, 246, 107);
        color: "#000000";
        width: 100px;
        margin: 15px;
        text-align: center;
        line-height: 75px;
        font-size: 35px;
      }
    
  
  
    
      A
      B
      C
    
    Align
    
      function align() {
          
        // Set the required alignment
        document.getElementById("flex-container")
                   .style.alignItems = "flex-start";
      }
    
  

输出：

示例 2：在此示例中，项目将与容器的末尾对齐。

HTML

  
    
      #flex-container {
        display: flex;
        background-color: #f1f1f1;
        width: 50%;
        height: 250px;
      }
      #flex-container > div {
        background-color: rgb(33, 246, 107);
        color: "#000000";
        width: 100px;
        margin: 15px;
        text-align: center;
        line-height: 75px;
        font-size: 35px;
      }
    
  
  
    
      A
      B
      C
    
    Align
    
      function align() {
          
        // Set the required alignment
        document.getElementById("flex-container")
                  .style.alignItems = "flex-end";
      }
    
  

输出：

示例 3：在此示例中，项目将与容器的中心对齐。

HTML

  
    
      #flex-container {
        display: flex;
        background-color: #f1f1f1;
        width: 50%;
        height: 250px;
      }
      #flex-container > div {
        background-color: rgb(33, 246, 107);
        color: "#000000";
        width: 100px;
        margin: 15px;
        text-align: center;
        line-height: 75px;
        font-size: 35px;
      }
    
  
  
    
      A
      B
      C
    
    Align
    
      function align() {
          
        // Set the required alignment
        document.getElementById("flex-container")
                  .style.alignItems = "center";
      }
    
  

输出：