css 什么是弯曲：1的意思是？

sirbozc5 于 2023-03-14 发布在其他

关注(0)|答案(9)|浏览(137)

众所周知，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的简写？我不明白它的意思，当我谷歌的时候什么也没有得到。

css

来源：https://stackoverflow.com/questions/37386244/what-does-flex-1-mean

9条答案

按热度按时间

dtcbnfnu1#

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

赞(0）回复(0）举报 2023-03-14

r1zk6ea12#

以下是解释：
https://www.w3.org/TR/css-flexbox-1/#flex-common

弹性：

相当于Flex：10.使弹性物料具有弹性并将弹性基准设置为零，从而使物料在弹性容器中接收指定比例的可用空间。如果弹性容器中的所有物料都使用此模式，则它们的大小将与指定的弹性系数成比例。
因此，flex:1等于flex: 1 1 0

赞(0）回复(0）举报 2023-03-14

lokaqttq3#

小心

在某些浏览器中：
flex:1;不等于flex:1 1 0;
flex:1; = flex:1 1 0n;（其中，n 是长度单位）。

***flex-grow：**一个数字，指定该项相对于其余弹性项的增长量。
*flex-shrink一个数字，指定项目相对于其余弹性项目的收缩量
*flex-basis物料的长度。法律的值：“auto”、“inherit”或后跟“%"、“px”、“em”或任何其他长度单位的数字。

这里的关键点是弹性基础需要一个长度单位。
例如，在Chrome中flex:1和flex:1 1 0会产生不同的结果。在大多数情况下，flex:1 1 0;可能会正常工作，但让我们来看看到底发生了什么：

示例

将忽略弹性基础，仅应用弹性增长和弹性收缩。
一米七纳一x =一米八纳一x =一米九纳一x
然而，如果容器的应用单元是嵌套的，则这初看起来似乎是可以的;期待意外！

在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变体（如Mac OS、Windows、Linux、iOS和Android上的Brave）上得到了验证。当尝试在Internet Explorer中测试时，Edge浏览器在Windows 10上被强制加载。

如果您希望用户仍然使用较旧版本的浏览器，则添加单位是更安全的选择。

赞(0）回复(0）举报 2023-03-14

crcmnpdw4#

我也对flex: 1感到困惑，所以我将在这里分享我理解这个属性的方式：）
要理解flex: 1的概念，首先我们必须确保父元素的display属性设置为flex，即display: flex。现在，父元素中嵌套的flexed元素可以使用flex：1.
好了，现在的问题是这会对弯曲的元素做什么？如果一个元素有flex: 1，这意味着所有其他元素的大小将与它们的内容具有相同的宽度，但是有flex: 1的元素将获得剩余的全部空间。请参见下图。

赞(0）回复(0）举报 2023-03-14

q5iwbnjs5#

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

赞(0）回复(0）举报 2023-03-14

xzlaal3s6#

默认值设置为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没有使用空间，因此额外空间等于容器的整个空间）。
***弹性收缩：**在考虑弹性基准后，如果可用空间不足，它将指定必须如何在物料之间分配（强加）“空间短缺”（同样，不是整个空间）。弹性收缩较高的物料将必须“承受”更多的空间短缺。

示例：

1.flex-basis3个项目的400 px flex-basis意味着 * 我们宁愿 * 有3个项目，每个项目400 px宽。现在，将发生什么：
1.如果我们有额外的空间，假设容器的宽度是1500像素，3个项目将占用1200像素，那么额外的300像素应该怎么处理？
1.如果容器中的空间不足？例如，如果在1500 px容器中有5个项目，每个项目400像素（不足=|1500像素- 5 * 400像素|= 500像素）。

以上两个问题的答案是弹性增长（第1个问题的答案）和弹性收缩（第2个问题的答案）。

例如，如果三个项目中的一个项目的flex-grow为5，而其他项目仍然使用默认值（即1），那么flex-grow为5的项目将获得（300 px/（1+1+5））* 3的额外空间。
另一个有用的例子是，如果你有一个flex容器，并且你希望每个子容器都占据父容器的整个宽度（例如，一个图像carousel），在这种情况下，你可以在所有子容器上使用flex: 0 0 100%，这样项目就有了一个占据父容器的整个宽度的flex基础，并关闭它们的增长/收缩。

赞(0）回复(0）举报 2023-03-14

pexxcrt27#

flex: 1将flex-grow设置为1（而默认值为0）。
它的作用：
如果所有项都将flex-grow设置为1，则容器中的剩余空间将平均分配给所有子项。如果其中一个子项的值为2，则剩余空间将占用其他子项两倍的空间（或至少尝试这样做）。