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-grow : 1; // this means that the div will grow in same proportion as the window-size
flex-shrink : 1; // this means that the div will shrink in same proportion as the window-size 
flex-basis : 0; // this means that 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%.

Answer 2

以下是解释：

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

  

flex：＆lt; positive-number＆gt;
      相当于flex：＆lt; positive-number＆gt; 1 0.使弹性项目具有灵活性，并将弹性基础设置为零，从而生成一个项目   接收flex中指定比例的可用空间   容器。如果Flex容器中的所有项目都使用此模式，则为其   尺寸将与指定的弯曲系数成比例。

因此flex:1相当于flex: 1 1 0

Answer 3

要小心

在某些浏览器中：

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

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

• flex-grow：一个数字，指定项目相对于其他灵活项目的增长量。
• flex-shrink 一个数字，指定项目相对于其他灵活项目的收缩程度
• flex-basis 项目的长度。法律价值观：＆＃34;自动＆＃34;，＆＃34;继承＆＃34;，或者数字后跟＆＃34;％＆＃34;，＆＃34; px＆＃34;，＆＃34; em＆ ＃34;或任何其他长度单位。

这里的关键点是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中试用此示例

＆＃13;

＆＃13;

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

＆＃13;

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>

＆＃13;

＆＃13;

＆＃13;

兼容性

应该注意，这会失败，因为某些浏览器未能遵守specification。

使用完整flex规范的浏览器：

• Firefox - ✓
• 边缘 - ✓（我知道，我也感到震惊。）
• Chrome - x
• 勇敢 - x
• Opera - x
• IE - （大声笑，它没有长度单位，但没有长度单位。）

更新2019年

Chrome的最新版本似乎终于纠正了这个问题，但其他浏览器仍然没有。

在Chrome Ver 74中测试并使用。

Answer 4

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

Answer 5

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

这是做什么的：

<块引用>

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

（来源：CSS Tricks）

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

<块引用>

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

（来源：MDN）

Answer 6

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

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

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

Answer 7

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

• flex-basis：它指定项目的理想尺寸。理想的意思是“假设没有任何额外的空间，也没有任何空间短缺”。 0% 意味着我们没有适合它们的理想尺寸，我们希望它们的尺寸真正灵活。我们希望它们根据可用空间自动调整大小（因此称为“灵活”）。
• flex-grow：在考虑了 flex-basis 之后，如果有剩余的额外空间，它指定“额外空间”（注意我们不是在谈论整个空间）必须如何在项目之间进行划分。具有更高 flex-grow 的那些将占用更多的额外空间。默认情况下，对所有项目使用相等的 flex-grow 是有意义的，这样所有项目将具有相同的额外空间份额。当 flex-basis 为 0% 时，所有项目的 flex-grow 为 1 会使它们划分“容器的整个空间”（因为 flex-basis 没有使用空间，额外的空间等于容器的整个空间）。< /li>
• flex-shrink： 在考虑了 flex-basis 之后，如果还有剩余的额外空间，它会指定如何在项目之间划分（强加）“空间不足”？那些具有较高 flex-shrink 的人将不得不“忍受”更多的短缺。

---

示例：

• flex-basis 3 个项目的 400px flex-basis 意味着我们宁愿有 3 个项目，每个项目的宽度为 400px。现在，会发生什么：
  1. 如果我们有额外的空间？假设容器宽度为 1500 像素宽。这 3 个项目将占用 1200 像素，那额外的 300 像素会怎样？
  2. 如果我们的集装箱空间不足？例如，如果在 1500 像素的容器中有 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%在所有子项上，以便项目具有占据父项的全宽并关闭其增长/收缩的弹性基础。