📜  Flexbox 中的 flex-basis 和 width 有什么区别?

📅  最后修改于: 2021-10-29 06:16:06             🧑  作者: Mango

本文描述了 flex-basis 和 width 属性之间的区别以及使用示例。 flex-basis 属性根据 flex-direction 值定义了 flex-items 的初始大小。它具有以下可以改变其行为的附加属性:

  • flex-direction值可以设置为行或列。如果它的值是行,它定义了宽度,如果它的值是列,它定义了高度。
  • flex-basis属性只能应用于 flex-items,而width属性可以应用于所有项目。
  • 使用 flex 属性时,flex-items 的三个属性flex-row、flex-shrinkflex-basis都可以合并为一个声明,但是使用 width 做同样的事情需要多行代码。
  • 如果flex-direction值设置为 column,则使用 width 属性水平调整 flex-items 的大小。

下面的例子展示了 flex-basis 和 width 和 height 属性之间的区别:

示例 1:在 flex-direction 设置为 row 时使用 flex-basis。

HTML


  

    FlexBox
    

  

    

GeeksForGeeks

    

Flex-basis vs Width

    
    
        
            
            
            
        
    
  


HTML


  

    FlexBox
    

  

    

GeeksForGeeks

    

Flex-basis vs Width

    
    
        
            
            
            
        
    
  


输出:

示例 2:当 flex-direction 设置为 column 时使用 flex-basis。

HTML



  

    FlexBox
    

  

    

GeeksForGeeks

    

Flex-basis vs Width

    
    
        
            
            
            
        
    
  

输出: