flex:1 和 flex:auto区别

Posted 2023-04-26

参考技术A 如果还没有使用过flex，请先拜读下 阮大大之Flex 布局教程：语法篇

在说flex:1和flex:auto区别之前先回顾flex:0 1 atuo;
从默认值上可以看出它有三个属性，分别是 flex-grow、flex-shrink、flex-basis

flex-grow:项目的放大比例，默认为0，如果存在剩余空间，不放大
flex-shrink:项目的缩小比例，默认为1，如果空间不足，会适当缩小
flex-basis:在分配空间之前，项目的主轴空间，相当于我们设置的width，

如下:
flex参数缩写后三个属性分别对应的值:

从上面可以看到flex:auto和flex:1的区别只在于flex-basis这个属性，auto表示基准值(也就是设置的width)，0%表示0无尺寸

1、分配前,子元素占用空间：0 + 300 + 200 = 500
2、父级空间: 1000
3、可分配空间: 1000 - 500 = 500
4、放大系数: 2 + 2 + 1 = 5
5、子元素获取可放大空间：
       item1： 500 * 2/5 = 200
       item2： 500 * 2/5 = 200
       item3： 500 * 1/5 = 100
6、实际子元素空间:
       item1: 0 + 200 = 200
       item2: 300 + 200 = 500
       item3: 200 + 100 = 300

了解了吗，明白了吗，不管你懂没懂，反正我懂了👻。安排！

flex: 1 是啥意思？

【中文标题】flex: 1 是啥意思？

【英文标题】：What does flex: 1 mean?flex: 1 是什么意思？

【发布时间】：2016-09-20 01:17:32

【问题描述】：

众所周知，flex 属性是flex-grow、flex-shrink 和flex-basis 属性的简写。它的默认值为0 1 auto，意思是

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

但我注意到，在很多地方都使用了flex: 1。是1 1 auto 还是1 0 auto 的简写？我不明白这是什么意思，当我用谷歌搜索时，我什么也得不到。

【问题讨论】：

引用w3schools.com "flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写"

【参考方案1】：

Flex: 1 等价于Flex: 1 0 0 和Flex: 1 1 0

请查看我拍摄的图像，分别显示下面Flex: 1 和Flex: 1 0 0 和Flex: 1 1 0 的输出

Flex: 1Flex: 1 0 0 Flex: 1 1 0

【参考方案2】：

小心

在某些浏览器中：

flex:1; 不等于flex:1 1 0;

flex:1; = flex:1 1 0n;（其中 n 是长度单位）。

flex-grow：

一个数字，指定项目相对于其他灵活项目的增长量。

flex-shrink

一个数字，指定项目相对于其他弹性项目的收缩程度

flex-basis

项目的长度。合法值：“auto”、“inherit”或后跟“%”、“px”、“em”或任何其他长度单位的数字。

这里的关键是 flex-basis 需要一个长度单位。

在 Chrome 中，例如 flex:1 和 flex:1 1 0 会产生不同的结果。在大多数情况下，flex:1 1 0; 似乎在起作用，但让我们来看看到底发生了什么：

示例

flex 基础被忽略，只应用 flex-grow 和 flex-shrink。

flex:1 1 0; = flex:1 1; = flex:1;

这乍一看似乎没问题，但是如果容器的应用单元是嵌套的；期待意外！

在 CHROME 中试试这个例子

.Wrap
  padding:10px;
  background: #333;

.Flex110x, .Flex1, .Flex110, .Wrap 
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;

.Flex110 
  -webkit-flex: 1 1 0;
  flex: 1 1 0;

.Flex1 
  -webkit-flex: 1;
  flex: 1;

.Flex110x
  -webkit-flex: 1 1 0%;
  flex: 1 1 0%;

FLEX 1 1 0
<div class="Wrap">
  <div class="Flex110">
    <input type="submit" name="test1" value="TEST 1">
  </div>
</div>

FLEX 1
<div class="Wrap">
  <div class="Flex1">
    <input type="submit" name="test2" value="TEST 2">
  </div>
</div>

FLEX 1 1 0%
<div class="Wrap">
  <div class="Flex110x">
    <input type="submit" name="test3" value="TEST 3">
  </div>
</div>

---

2021 年更新

所有主流浏览器的最新版本似乎都实现了flex: 1 并符合W3C 标准。这已在 Chrome、Opera、Edge、Firefox、Safari、Chromium 和一些 Chromium 变体（如 macOS、Windows、Linux、iOS 和 Android 上的 Brave）上得到验证。尝试在 Internet Explorer 中测试时，Edge 浏览器在 Windows 10 上被强制加载。

如果您希望您的用户仍然使用旧版本的浏览器，那么以下问题可能仍然普遍存在。

【讨论】：

当值为 0 时，单位不是强制性的。规范说flex: 1 与flex: 1 1 0 相同。在您的示例中，如果您删除 .Flex110x,.Flex1, .Flex110, .Wrap 规则中的 .Wrap 类，则按预期工作。

请提供链接，我在规范中找不到您所说的内容。我什么都没发明，我的答案是基于 flexbox 规范

@Toskan 为了获得最大的兼容性，请使用完整的语法 flex:1 1 0n;

感谢您指出这种差异，我不知道我的问题出在哪里。有一些赏金。

当css变成物理

【参考方案3】：

默认值设置为1 1 0%（分别是flex-grow flex-shrink flex-basis 的简写值）可能是因为这些值对“弹性”项目最有意义。以下是这些值的确切含义：

flex-basis：

指定项目的理想尺寸。理想的意思是“假设既没有多余的空间，也没有空间的短缺”。 0% 意味着我们对它们没有理想的尺寸，我们希望它们的尺寸真正灵活。我们希望它们根据可用空间自动调整大小（因此称为“灵活”）。

flex-grow：

考虑到 flex-basis 后，如果还有剩余的额外空间，它指定“额外空间”（注意我们不是在谈论整个空间）必须如何划分这几项。具有更高 flex-grow 的那些会占用更多的额外空间。默认情况下对所有项目使用相等的 flex-grow 是有意义的，这样所有项目都将拥有相同的额外空间份额。当 flex-basis 为 0% 时，所有项目的 flex-grow 为 1 使它们划分“容器的整个空间”（因为 flex-basis 不使用空间，所以额外空间等于容器的整个空间）。

flex-shrink：

考虑到flex-basis后，如果可用空间不够，它指定了“空间不足”（同样，不是整个空间）必须如何划分（施加在）项目之间。具有较高 flex-shrink 的那些将不得不“忍受”更多的短缺。

---

示例：

flex-basis

3 个项目的 400 像素的 flex-basis 意味着我们宁愿拥有 3 个每个 400 像素宽的项目。现在，会发生什么：

如果我们有额外的空间？假设容器宽度为 1500 像素宽。这 3 个项目将占用 1200 像素，那额外的 300 像素应该怎么处理？ 如果容器空间不足？例如，如果在 1500px 的容器中有 5 个 400 像素的项目（短缺 = |1500px - 5 * 400px| = 500px）。

上述两个问题的答案是

flex-grow

（回答第一个问题）和

flex-shrink

（回答第二个问题）。

例如，如果三项中的一项的 flex-grow 为 5，而其他项仍为默认值（即 1）怎么办？那么 flex-grow 为 5 的那个将获得 (300px / (1+1+5)) * 3 的额外空间。

另一个有用的例子是，如果你有一个 flex 容器，并且你希望每个子容器完全占据父容器的全部宽度（例如，图像轮播），在这种情况下，你可以在所有容器上使用 flex: 0 0 100%子项，以便项目具有弹性基础，即占据父项的全宽，并关闭它们的增长/收缩。

【参考方案4】：

我也对flex: 1感到困惑，所以我将在这里分享我对这个属性的理解:)

要理解flex: 1 的概念，首先我们必须确保父元素的显示属性设置为flex，即display: flex。现在，在父元素中嵌套的 flexed 元素可以使用 flex: 1.

好的，现在的问题是这会对 flexed 元素产生什么影响？如果一个元素具有flex: 1，这意味着所有其他元素的大小将与其内容具有相同的宽度，但具有flex: 1 的元素将拥有剩余的完整空间。请参见下图。

【讨论】：

答案有点不完整，因为它没有说明flex: 1; 是flex: 1 1 0; 的简写，它本身就是：flex-shrink: 1; flex-grow: 1; flex-basis: 0; 的简写

【参考方案5】：

flex: 1 将flex-grow 设置为1（而默认值为0）。

这是做什么的：

如果所有项目都将 flex-grow 设置为 1，则 容器将平均分配给所有孩子。如果其中之一 children 的值为 2，剩余空间将占用两倍 和其他人一样多的空间（或者它会尝试，至少）。

（来源：CSS Tricks）

对于具有无单位数字的单值弹性语法（而不是 flex-basis 的值，另一个选项），

...被解释为flex: <number> 1 0；这 flex-shrink 的值假定为 1，flex-basis 的值为 假定为0。

（来源：MDN）

【参考方案6】：

在 Chrome 版本 84 中，flex: 1 等同于 flex: 1 1 0%。以下是一堆截图。

【参考方案7】：

解释如下：

https://www.w3.org/TR/css-flexbox-1/#flex-common

弹性： 等效于 flex: 1 0. 使弹性项目具有弹性并将弹性基础设置为零，从而产生一个项目 在 flex 中接收指定比例的可用空间 容器。如果 flex 容器中的所有项目都使用这种模式，它们的 尺寸将与指定的弹性系数成正比。

因此flex:1 等价于flex: 1 1 0

【讨论】：

附带说明：我认为当您对所有孩子应用相同的flex 时，实际上重要的是flex: 1 ? 0;，其中“？”可以是任何东西，它不会有任何区别

@DreamTeK 仅在 Chrome 等不符合标准的浏览器中使用。

@TylerH 正确并在我的回答中注明，但what does flex:1 mean? 可以解释。 o.p 不要求规格，只要求正在发生的事情。不幸的是，Chrome 现在是最流行的浏览器，需要支持。我自己不是 Chrome 的粉丝或用户！

@DreamTeK 当询问某事的含义/定义时，通常会去字典 :-) 在 CSS 属性和速记的情况下，规范就是字典。浏览器可能不同，详细说明每个浏览器如何实现它是有用的（当浏览器不同时），但仍然重要的是要注意任何与规范不同的浏览器都是错误 .

@TylerH 这就是为什么在我的回答中提到的状态“应该注意，这失败了，因为这些浏览器未能遵守规范。”以及规范的链接！

【参考方案8】：

flex: 1 表示如下：

flex-grow : 1;    ➜ The div will grow in same proportion as the window-size       
flex-shrink : 1;  ➜ The div will shrink in same proportion as the window-size 
flex-basis : 0;   ➜ The div does not have a starting value as such and will 
                     take up screen as per the screen size available for
                     e.g:- if 3 divs are in the wrapper then each div will take 33%.

【讨论】：

@CookieMonster 不，flex: 1 表示 1 1 0 ... 但在 IE 上是 1 1 0px

@LGSon，您可以从基础值中省略单位，因此 1 1 0 和 1 1 0px 是等价的。 IE恰好只支持一个单元。

@CookieMonster 我知道 Flexbox 是如何工作的，我只是更正您的第一条评论，这是错误的。

@LGSon，当1 1 0px 和1 1 0 相等时，flex: 1 意味着 1 1 0px 是如何错误的？

@CookieMonster 它们可能呈现相同，但不等价，因为当为flex-basis 使用无单位值时，内容将被忽略，元素大小基于它的flex-grow/flex-shrink。