“Flex：none”与未指定（省略）的 flex 属性答案

【问题标题】："Flex: none" vs. Non-specified (omitted) flex property“Flex：none”与未指定（省略）的 flex 属性
【发布时间】：2017-01-21 06:37:35
【问题描述】：

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/

【问题讨论】：

标签： html css flexbox

【解决方案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（请参见下面的代码），据我所知，布局保持不变。

对于your demo来说，去掉flex: none没有区别的原因是两个兄弟（.item2和.item3）是灵活的（flex: 1），里面有足够的空间容纳.item1内容的容器。

但是，如果 .item1 有更多内容，flex: none 会产生很大的不同。

revised 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>

【讨论】：

非常感谢您的详细解释，这是一个很好的答案。据我了解，如果其中一个兄弟姐妹（蓝色的）具有固定宽度（假设它是图像或输入字段），那么省略和 auto 之间的区别就没有了吗？
输入错误。我的意思是，省略和none 之间的区别。这是更新的小提琴：jsfiddle.net/r4s8z835/5
还有一个需要考虑的因素：stackoverflow.com/q/36247140/3597276
正如我之前评论中的链接中所引用的，弹性项目默认情况下不能缩小到其内容的大小以下。弹性项目的初始设置是min-width: auto；您需要使用 overflow 属性或 min-width: 0 覆盖此默认值。 jsfiddle.net/r4s8z835/6

【解决方案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/

例如，如果我减小容器大小并应用溢出：滚动就会发生这种情况。

【讨论】：