"Flex: none"与未指定（省略）的flex属性有何区别？

Question

flex: none和忽略flex属性之间有什么区别？我在几个简单的布局中测试了一下，没有看到差别。例如，我可以从蓝色的项目中删除flex：none（请参见下面的代码），而布局仍然保持不变。我的理解是正确的吗？第二个问题是，在更复杂的布局中呢？我应该写flex：none还是可以直接省略它？

.flex-container {
  display: flex;
  width: 400px;
  height: 150px;
  background-color: lightgrey;
}
.flex-item {
  margin: 10px;
}
.item1 {
  flex: none; /* Could be omitted? */
  background-color: cornflowerblue;
}
.item2 {
  flex: 1;
  background-color: orange;
}
.item3 {
  flex: 1;
  background-color: green;
}

<div class="flex-container">
  <div class="flex-item item1">flex item 1</div>
  <div class="flex-item item2">flex item 2</div>
  <div class="flex-item item3">flex item 3</div>
</div>

https://jsfiddle.net/r4s8z835/

- john c. j.

Answer 1

flex: none与不定义flex属性之间有什么区别？

flex: none相当于flex: 0 0 auto，即以下简写形式：

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

简单来说，flex: none根据内容的宽度/高度调整伸缩项目的大小，但不允许其缩小。这意味着该项有可能溢出容器。

如果省略flex属性（和长手属性），则初始值如下：

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

这被称为flex: initial。

这意味着当有空闲空间时，该项将不会增长（就像flex: none一样），但可以在必要时缩小（与flex: none不同）。

---

我可以从蓝色项中删除flex: none（请参见下面的代码），我理解的布局仍然相同。

就您的演示文稿而言，当删除flex: none时没有区别的原因是两个兄弟元素（.item2和.item3）是可伸缩的（flex: 1），并且容器中有足够的空间来容纳.item1的内容。

但是，如果.item1具有更多内容，则flex: none会产生很大的区别。

修改版 fiddle

.flex-container {
  display: flex;
  width: 400px;
  height: 150px;
  background-color: lightgrey;
}
.flex-item {
  margin: 10px;
}
.item1 {
  flex: none; /* Now try removing it. */
  background-color: cornflowerblue;
}
.item2 {
  flex: 1;
  background-color: orange;
}
.item3 {
  flex: 1;
  background-color: green;
}

<div class="flex-container">
  <div class="flex-item item1">flex item 1 flex item 1 flex item 1 flex item 1flex item 1 flex item 1flex item 1flex item 1</div>
  <div class="flex-item item2">flex item 2</div>
  <div class="flex-item item3">flex item 3</div>  
</div>

- Michael Benjamin

---

非常感谢您详细的解释，这是一个很好的答案。从中我理解，如果其中一个兄弟元素（蓝色的那个）有固定宽度（假设它是一张图片或输入框），那么对于它来说省略和“自动”之间就没有区别了？ - john c. j.

打错了，我的意思是省略和 none 之间的区别。这里是更新后的 fiddle：https://jsfiddle.net/r4s8z835/5/ - john c. j.

还有另一个因素需要考虑：https://dev59.com/mVoV5IYBdhLWcg3wc-Ym - Michael Benjamin

正如我在之前的评论中提到的链接所指出的，弹性项默认情况下不能缩小至其内容的大小。弹性项的初始设置是min-width: auto; 您需要使用overflow属性或者min-width: 0来覆盖这个默认值。 https://jsfiddle.net/r4s8z835/6/ - Michael Benjamin

Answer 2

根据https://css-tricks.com/almanac/properties/f/flex/#article-header-id-4的解释，它们之间的区别在于flex:none不会在溢出情况下缩小。默认属性为flex: 0 1 auto，而flex：none将其更改为flex：0 0 auto。

<div class="flex-container">
  <div class="flex-item item1">flex item 1</div>
  <div class="flex-item item2">flex item 2</div>
  <div class="flex-item item3">flex item 3</div>  
</div>

<div class="flex-container">
  <div class="flex-item item1 item-1-flex-none">flex item 1</div>
  <div class="flex-item item2">flex item 2</div>
  <div class="flex-item item3">flex item 3</div>  
</div>
.flex-container {
  display: flex;
  width: 100px;
  height: 150px;
  overflow:scroll;
  background-color: lightgrey;
}

.flex-item {
  margin: 10px;
}

.item1 {
  background-color: cornflowerblue;
}

.item2 {
  flex: 1;
  background-color: orange;
}

.item3 {
  flex: 1;
  background-color: green;
}


.item-1-flex-none{flex:none;}

https://jsfiddle.net/r4s8z835/2/

例如，如果我减小您的容器大小并应用overflow:scroll，就会发生这种情况。

- Mosset Jérémie