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

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

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

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

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

HTML

  

    
    

  

    
GeeksForGeeks
    
Flex-basis vs Width 
    

    

        

            

            

            

        
    

  

输出：

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

HTML

  

    
    

  

    
GeeksForGeeks
    
Flex-basis vs Width 
    

    

        

            

            

            

        
    

  

输出：