了解flex和flex-grow属性之间的区别 [英] Understanding the difference between the flex and flex-grow properties

问题描述

设置 flex：1; 和设置 flex-grow：1; 之间有什么不同？当我在我的代码中设置前者时，我所显示的两列宽度相等，而当我设置后者时不这样做。

这很奇怪，因为我认为设置 flex：1; 只影响 flex-grow 属性。

解决方案 flex 是一个速记属性 flex-grow ， flex-shrink 和 flex-basis 。

在这种情况下， flex：1 集合

• flex-basis：0 （在旧的规格草案中，它是 flex-basis：0％
  
  
  

  如果您只使用 flex-grow：1 ，您将有
  

  
  
  • flex-grow：1
  
  
  • flex-shrink：1
  
  
  • flex-basis：auto
    
    

    然后，不同之处在于第一种情况下flex基本大小为0，所以flex项目将会有第二种情况下，每个Flex项目将以其内容给定的大小开始，然后根据可用空间增长或缩小。最有可能的大小将最终不同。

    
    

    What is the difference in effect between setting flex: 1; and setting flex-grow: 1;? When I set the former in my code, the two columns I have display with equal width, while they do not do so when I set the latter.

    This is strange, as I assumed that setting flex: 1; only affects the flex-grow property.

    解决方案

    flex is a shorthand property of flex-grow, flex-shrink and flex-basis.

    In this case, flex: 1 sets

    • flex-grow: 1
    • flex-shrink: 1
    • flex-basis: 0 (in old spec drafts it was flex-basis: 0%)

    If you only use flex-grow: 1, you will have

    • flex-grow: 1
    • flex-shrink: 1
    • flex-basis: auto

    Then, the difference is that the flex base size will be 0 in the first case, so the flex items will have the same size after distributing free space.

    In the second case each flex item will start with the size given by its content, and then will grow or shrink according to free space. Most probably the sizes will end up being different.

    这篇关于了解flex和flex-grow属性之间的区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！