flex: 1 是什么意思？

Question

众所周知，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 的简写？我不明白这是什么意思，当我用谷歌搜索时，我什么也得不到。

Answer 1

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

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

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

Answer 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 上被强制加载。

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

Answer 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 像素宽的项目。现在，会发生什么：
  1. 如果我们有额外的空间？假设容器宽度为 1500 像素宽。这 3 个项目将占用 1200 像素，那额外的 300 像素应该怎么处理？
  2. 如果容器空间不足？例如，如果在 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%子项，以便项目具有弹性基础，即占据父项的全宽，并关闭它们的增长/收缩。

Answer 4

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

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

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

Answer 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）

Answer 6

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

Answer 7

解释如下：

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

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

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

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