CSS flex: 1 是什么意思？

What does flex: 1 mean?

提问by Md. Rafee

As we all know, the flexproperty is a shorthand for the flex-grow, flex-shrink, and the flex-basisproperties. Its default value is 0 1 auto, which means

我们都知道，该flex属性是一个速记flex-grow，flex-shrink和flex-basis属性。它的默认值是0 1 auto，这意味着

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

but I've noticed, in many places flex: 1is used. Is it shorthand for 1 1 autoor 1 0 auto? I can't understand what it means and I get nothing when I google.

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

采纳答案by Rinku Bhilota

Here is the explanation:

这是解释：

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

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

flex: <positive-number>
Equivalent to flex: <positive-number> 1 0. Makes the flex item flexible and sets the flex basis to zero, resulting in an item that receives the specified proportion of the free space in the flex container. If all items in the flex container use this pattern, their sizes will be proportional to the specified flex factor.

flex: <positive-number>
等价于 flex: <positive-number> 1 0. 使 flex 项具有弹性，并将 flex 基础设置为零，从而使项在 flex 容器中接收指定比例的可用空间。如果 flex 容器中的所有项目都使用此模式，则它们的大小将与指定的 flex 因子成正比。

Therefore flex:1is equivalent to flex: 1 1 0

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

回答by Rinku Bhilota

flex: 1means the following:

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

回答by DreamTeK

BE CAREFUL

当心

In some browsers:

在某些浏览器中：

flex:1;does notequal flex:1 1 0;

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

flex:1;= flex:1 1 0n;(where nis a length unit).

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

• flex-grow:A number specifying how much the item will grow relative to the rest of the flexible items.
• flex-shrinkA number specifying how much the item will shrink relative to the rest of the flexible items
• flex-basisThe length of the item. Legal values: "auto", "inherit", or a number followed by "%", "px", "em" or any other length unit.

• flex-grow：一个数字，指定项目相对于其余灵活项目的增长程度。
• flex-shrink一个数字，指定项目相对于其余灵活项目的收缩程度
• flex-basis 项目的长度。合法值：“auto”、“inherit”或后跟“%”、“px”、“em”或任何其他长度单位的数字。

The key point here is that flex-basis requires a length unit.

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

In Chrome for example flex:1and flex:1 1 0produce different results. In most circumstances it may appear that flex:1 1 0;is working but let's examine what really happens:

例如在 Chrome 中flex:1并flex:1 1 0产生不同的结果。在大多数情况下，它可能看起来有效，flex:1 1 0;但让我们检查一下实际发生的情况：

EXAMPLE

例子

Flex basis is ignored and only flex-grow and flex-shrink are applied.

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

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

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

This may at first glance appear ok however if the applied unit of the container is nested; expect the unexpected!

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

Try this example in CHROME

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

COMPATIBILITY

兼容性

It should be noted that this fails because some browsers have failed to adhere to the specification.

应该注意的是，这失败是因为某些浏览器未能遵守规范。

Browsers that use the full flex specification:

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

• Firefox - ?
• Edge - ? (I know, I was shocked too.)
• Chrome - x
• Brave - x
• Opera - x
• IE - (lol, it works without length unit but not with one.)

• 火狐 - ?
• 边缘 - ？（我知道，我也很震惊。）
• 铬 - x
• 勇敢 - x
• 歌剧-x
• IE - （大声笑，它没有长度单位，但没有长度单位。）

---

---

UPDATE 2019

2019 年更新

Latest versions of Chrome seem to have finally rectified this issue but other browsers still have not.

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

Tested and working in Chrome Ver 74.

在 Chrome Ver 74 中测试和工作。