flex-grow详解

小蓝 • 2024-12-12 17:14 • 编程

一、flexgrow失效

1、该元素未设置display: flex或display: inline-flex

<div style="flex-grow: 1; background-color: red; width: 100px; height: 100px; margin-right: 10px;"></div>

2、该元素处于父元素的flex-basis或者width设置为0的情况下

<div style="display: flex; width: 300px;">
  <div style="background-color: red; flex-grow: 1; flex-basis: 100px;"></div>
  <div style="background-color: blue; flex-grow: 1; flex-basis: 200px;"></div>
</div>

3、该元素的flex-basis值为auto且它的width为auto

<div style="display: flex;">
  <div style="background-color: red; flex-grow: 1;"></div>
  <div style="background-color: blue; flex-grow: 1; width: auto;"></div>
</div>

二、flexgrow作用

flex-grow属性定义了元素在flex容器中的拉伸比例，默认值是0，它指定一个数字，确定在决定了元素要分配多少多余空间后，剩余空间应该如何分配。例如，如果所有 flex项都设置为“1”，它们将等分其中的用于多余空间的空间块。

<div style="display: flex;">
  <div style="background-color: red; flex-grow: 1;"></div>
  <div style="background-color: blue; flex-grow: 2;"></div>
</div>

上面代码将把其中的用于多余空间的空间块分成1份和2份

三、flexgrow属性解

“flex-grow”被定义为元素在弹性容器内拉伸/收缩的比率，默认值为0。它指定了元素在分配剩余空间时要考虑的因素。如果所有弹性项都有0（默认），弹性容器不会为该项目增加额外的空间。如果一个弹性项的值为1，其他项没有指定的情况下，那么他们将分享弹性容器中的所有剩余空间。

<div style="display: flex;">
  <div style="background-color: red; flex-grow: 1;"></div>
  <div style="background-color: blue; flex-grow: 2;"></div>
</div>

四、flex-flow

flex-flow是一个组合属性，用于同时设置flex-direction属性和flex-wrap属性。

<div style="display: flex; flex-flow: column nowrap;">
  <div style="background-color: red; height: 100px;"></div>
  <div style="background-color: blue; height: 100px;"></div>
  <div style="background-color: green; height: 100px;"></div>
</div>

五、flex-shrink

flex-shrink属性指定弹性项目的缩小比例，默认值为1，当弹性容器空间不足时，该属性指定弹性项目的缩小比例。例如，如果所有的 flex项都设置为 “1”则它们将平等地收缩。

<div style="display: flex;">
  <div style="background-color: red; flex-shrink: 1;"></div>
  <div style="background-color: blue; flex-shrink: 2;"></div>
</div>

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/249442.html