📜  如何使用 CSS 左右对齐 flexbox 列?

📅  最后修改于: 2021-09-01 01:46:29             🧑  作者: Mango

通过使用 flex 容器类中的 align-content 属性,可以将 flex 列向左或向右对齐。 align-content 属性改变了 flex-wrap 属性的行为。它对齐弹性线。它用于指定柔性容器内的行之间的对齐方式。

  • 为了将列向左对齐,align-content 属性将设置为“flex-start”。
  • 为了将列向右对齐,align-content 属性将设置为“flex-end”。
  • 为了将列对齐到最末端,align-content 属性将设置为 ‘space-between’。

示例 1:此示例将 flex 框显示到列中。



  

    

  

    
        
1
        
2
        
3
          
4
        
5
        
6
        
7
          
8
      
  

输出:

示例 2:此示例将 flex 框列向左对齐。



  

    

  

    
        
1
        
2
        
3
          
4
        
5
        
6
        
7
          
8
      
  

输出:

示例 3:此示例将 flex 框列向右对齐。



  

    

  

    
        
1
        
2
        
3
          
4
        
5
        
6
        
7
          
8
      
  

输出:

示例 3:此示例将 flex 框对齐到两个端点。



  

    

  

    
        
1
        
2
        
3
          
4
        
5
        
6
        
7
          
8
      
  

输出: