"Flex:none"与非指定(省略)flex属性

Question

flex: noneflex属性之间是否存在差异？

我在几个简单的布局中测试它,我没有看到差异.

例如,我可以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/

Answer 1

flex: noneflex属性之间是否存在差异？

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会产生很大的不同.

修改过的小提琴

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