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/

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

就your demo而言，移除flex: none时没有区别的原因是两个兄弟姐妹（.item2和.item3）是灵活的（{{1}并且容器中有足够的空间来容纳flex: 1的内容。

但是，如果.item1包含更多内容，.item1会产生很大的影响。

revised fiddle

＆＃13;

flex: none

＆＃13;

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

＆＃13;

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/

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

“Flex：none”与非指定（省略）flex属性

2 个答案: