flex vs flex-grow 产生不同的结果

Question

学习 Flexbox 并且我不明白为什么 flex 属性的行为方式是这样的。据我了解，flex 只是 flex-grow、flex-shrink 和 flex-basis 的简写，最后两个是可选的。

在下面的示例中，我期望使用 flex-grow 与 flex 获得相同的结果，并且只定义了第一个值。我得到不同的结果，但我不明白为什么。第一个容器中的结果是我所期望的。看起来很简单，我不知道我错过了什么 - 速记属性不能按照我理解的方式工作？感谢任何帮助。

.container {
  height: 200px;
  width: 100%;
  background: lightgray;
  margin: 20px auto;
  display: flex;
  align-items: center;
}

.item {
  height: 50px;
  width: 300px;
  align-items: flex-end;
}

.item1 {
  border: 1px solid red;
  flex-grow: 0;
}

.item2 {
  border: 1px solid green;
  flex-grow: 1;
}

.item3 {
  border: 1px solid red;
  flex: 0;
}

.item4 {
  border: 1px solid green;
  flex: 1;
}

  <div class="container">
    <div class="item item1"></div>
    <div class="item item2"></div>
  </div>

  <div class="container">
    <div class="item item3"></div>
    <div class="item item4"></div>
  </div>

Answer 1

当您仅设置 flex-grow 时，flex-basis 属性不受影响。它仍然默认为flex-basis: auto。

当您使用 flex 属性时，flex-basis 将重置为 0。

所以flex: 0 是flex-grow: 0 和flex-basis: 0 的简写。这意味着 0 宽度。

有了flex-grow: 0，你仍然有flex-basis: auto。

要了解flex-basis: 0 和flex-basis: auto 之间的区别，请参阅这篇文章：

• Make flex-grow expand items based on their original size

Answer 2

使用 flex 而不是三重奏会缩小，并且基础比看起来要复杂一些.. 第二个和第三个参数不是可选的，你可以选择单独使用 flex 一个值 2 或 3 但它会根据你传递的值表现不同

根据mdn：将无单位数字作为弹性值的情况

flex : <number>  ;
/*translates to :*/ 
flex : <number> 1 0 ;

在你的情况下 flex 设置为 0 所以你有：

flex : 0  ;
/*translates to :*/ 
flex : 0 1 0 ;

所以最后一个的 flex-basis 设置为 0，而 flex grow 为 0，因此它与 item1 不同。没有基础并且收缩设置为 1 ，第 4 项将占据整行，因为他已经增长了 1

你有第 4 项

flex : 1  ;
/*translates to :*/ 
flex : 1 1 0 ;