如何使用 CSS 设置元素宽度不等的 flexbox ？

CSS 中的flex 属性是 flex-grow 、 flex-shrink和flex-basis 属性的组合。用于设置灵活项目的长度。 flex 属性响应迅速且移动友好。很容易定位子元素和主容器。
边距不会与内容边距一起折叠。无需编辑 HTML 部分即可轻松更改任何元素的顺序。但是很少有元素的宽度不等，那个时候你可以在 CSS 部分设计整个东西。

句法：

flex: number;

注意：在这种情况下，元素宽度取决于窗口的其他元素和屏幕。

示例 1：在这里您将看到使用 CSS 设计的两种宽度的 flexbox。

    
        
        
    
    
        
            
GeeksforGeeks
    

   
        
This is 1st column
        
This is 2nd column
        
This is 3rd column
        
This is 4th column
   
    
    
                    

输出：

示例 2：在此示例中，您将看到 4 个项目，每个项目的宽度不等，相互比较。

    
        
        
    
    
        
            
GeeksforGeeks
    

   
        
ID
        
Ph_no
        
Name
        
Adsress
   
    
    
                    

输出：