为什么flex速记属性表现不同？

Question

我有以下HTML代码：

<div id="main">
  <div>One</div>
  <div>Two</div>  
  <div>One, Two Three</div>
</div>

当我使用

时

#main div {
 flex: 1;
 border: 1px solid;
}

所有div都是等间隔的。但是当我扩展它时，

#main div {
 flex-grow:1;
 flex-shrink:1;
 flex-basis: auto;
 border: 1px solid;
}

div不是等间隔的。我在这里错过了什么吗？

1 个答案:

答案 0 :(得分：1)

使用flex:1时，它是flex: 1 1 0的简写（在IE中 - 是flex:1 1 0px）而不是flex: 1 1 auto

原因如下：

Basic Values of flex

  

flex：<positive-number>

     

相当于flex: <positive-number> 1 0。使弹性项目具有灵活性，并将弹性基础设置为零，从而生成一个项目   接收flex中指定比例的可用空间   容器。如果Flex容器中的所有项目都使用此模式，则为其   尺寸将与指定的弯曲系数成比例。

Answer 1

使用flex:1时，它是flex: 1 1 0的简写（在IE中 - 是flex:1 1 0px）而不是flex: 1 1 auto

原因如下：

Basic Values of flex

  

flex：<positive-number>

     

相当于flex: <positive-number> 1 0。使弹性项目具有灵活性，并将弹性基础设置为零，从而生成一个项目   接收flex中指定比例的可用空间   容器。如果Flex容器中的所有项目都使用此模式，则为其   尺寸将与指定的弯曲系数成比例。