如何使用 flexbox 定义两列布局？

在本文中，我们将学习如何使用 flexbox 创建一个两列布局。要创建两列布局，我们使用display和flex-direction属性。

方法：要创建一个两列布局，首先我们创建一个具有属性display: flex的

元素，它使它成为一个 div flexbox，然后添加flex-direction: row ，以使布局按列排列。然后在上面的 div 中添加所需的 div 和 require 宽度，它们都将作为列出现。在两列布局的情况下，我们在父 div 中添加两个 div。

句法：

示例 1：两列宽度相等的两列布局。

HTML

  

    
  
    

  

    

        

            
Geeksfo
            
                
Left
            
        
        

            
rgeeks
            
                
RIGHT
            
        
    

  

输出：

输出

示例 2：两列具有不同宽度的两列布局。

HTML

  

    
  
    

  

    

        

            
Geeksforgeeks
        
        

            

                We provide a variety of services 
                for you to learn, thrive and also 
                have fun! Free Tutorials, Millions 
                of Articles, Live, Online and 
                Classroom Courses ,Frequent Coding 
                Competitions, Webinars by Industry 
                Experts, Internship opportunities 
                and Job Opportunities.
            
        
    

  

输出：

输出