Ein Artikel, in dem die Auswirkungen von drei Flex-Eigenschaften auf Elemente ausführlich erläutert werden

Bei der Entwicklung verwenden wir oft das Flex-Attribut, um auf die untergeordneten Elemente der flexiblen Box zu wirken, zum Beispiel: flex:1 oder flex: 1 1 auto , dann Wie steuert dieses Attribut das Verhalten von Elementen? Was genau bedeutet flex:1? Lassen Sie sich von diesem Artikel umfassend über die Flex-Eigenschaft informieren! [Empfohlenes Lernen: CSS-Video-Tutorial]flex:1或者flex: 1 1 auto，那么这个属性到底控制了元素怎么的行为呢？flex:1又究竟是什么含义呢？让这篇文章带你彻底了解 flex 属性吧！【推荐学习：css视频教程】

首先我们需要了解，flex 是三个属性 flex-grow 、flex-shrink 、flex-basis的简写，可以使用一个、两个、或者三个值指定 flex 属性。具体语法可以参考MDN-flex

接下来我们逐一拆解这三个属性对元素的影响

flex-basis

flex-basis 定义了空间分配发生之前初始化 flex 子元素的尺寸，属性默认值 auto； flex 子元素未伸张和收缩之前，它的大小是多少。

如果 flex-basis 设置为 auto , 浏览器会先检查 flex 子元素的主尺寸是否设置了 flex 子元素的初始值。

比如说你已经给你的 flex 子元素设置了 150px 的宽，则 150px 就是这个 flex 子元素的 flex-basis；如果没有设置，则 auto 会解析为其内容的大小。这个例子中，给第一个元素设置宽度150px，第二、三个元素不设置宽度。

:first-child {
  width: 150px;
}

效果如下：

如果你想 flexbox 完全忽略 flex 子元素的尺寸就设置 flex-basis 为 0。这样就算元素一设置了宽度，它最终的宽度也是内容宽度。

正负自由空间

在介绍剩下两个属性前先看两个概念 positive free space 正向自由空间和 negative free space反向自由空间:

• 正向自由空间

  比如说，现在有 500px 宽的 flex 容器，flex-direction 属性值为 row, 三个 100px 宽的 flex 子元素， 那么没有被填充的 200px 的 就是正向自由空间(positive free space)。

• 反向自由空间

  当子元素的宽度总和大于容器宽度时，溢出的尺寸100px就是反向自由空间。

那么用什么属性分配正负自由空间呢？

flex-grow

• flex-grow 默认值 0
Zuerst müssen wir verstehen, flexibel sein ist Die Abkürzungen der drei Attribute flex-grow, flex-shrink und flex-basis können mit eins, zwei oder drei angegeben werden Werte. Flex-Eigenschaft. Informationen zur spezifischen Syntax finden Sie unter MDN-flex

Als nächstes wollen wir die Auswirkungen dieser drei Attribute auf das Element einzeln aufschlüsseln

flex-basis

flex-basis definiert die Größe des initialisierten untergeordneten Flex-Elements, bevor die Speicherplatzzuweisung erfolgt. Das Attribut Standardwert ist automatisch, die Größe des untergeordneten Flex-Elements, bevor es gedehnt wird schrumpft.

Wenn „flex-basis“ auf „auto“ eingestellt ist, prüft der Browser zunächst, ob die Hauptgröße des untergeordneten Flex-Elements auf den Anfangswert des untergeordneten Flex-Elements eingestellt ist. 🎜🎜Wenn Sie beispielsweise eine Breite von 150 Pixel für Ihr untergeordnetes Flex-Element festgelegt haben, ist 150 Pixel die Flex-Basis dieses untergeordneten Flex-Elements. Wenn dies nicht festgelegt ist, wird es automatisch auf die Größe seines Inhalts aufgelöst. In diesem Beispiel ist die Breite des ersten Elements auf 150 Pixel festgelegt und das zweite und dritte Element haben keine Breite. 🎜

.flex-grow-father {
  width: 500px;
  div:nth-child(1) {
    width: 50px;
  }
  div:nth-child(2) {
    width: 100px;
  }
  div:nth-child(3) {
    width: 150px;
  }
}

🎜Der Effekt ist wie folgt: 🎜🎜🎜🎜Wenn Sie möchten, dass Flexbox die Größe von untergeordneten Flex-Elementen vollständig ignoriert, setzen Sie Flex-Basis auf 0. Selbst wenn für Element 1 eine Breite festgelegt ist, ist seine endgültige Breite auf diese Weise die Inhaltsbreite. 🎜🎜🎜

Positiver und negativer freier Speicherplatz

🎜Schauen wir uns zwei Konzepte an, bevor wir die verbleibenden zwei Attribute einführen positiver freier Speicherplatz In Richtung frei Leerzeichen und negativer freier Speicherplatz Freier Speicherplatz umkehren:🎜

• 🎜Freier Speicherplatz weiterleiten🎜🎜Zum Beispiel gibt es jetzt einen 500 Pixel breiten Flex-Container und der Wert des Flex-Direction-Attributs ist Zeile , drei 100 Pixel breite untergeordnete Flex-Elemente, dann sind die 200 Pixel, die nicht gefüllt sind, der positive freie Platz. 🎜🎜🎜🎜🎜
  • 🎜Umgekehrter freier Speicherplatz🎜🎜Wenn die Summe der Breiten der untergeordneten Elemente größer als die Breite des Containers ist, ist die Überlaufgröße von 100 Pixel der umgekehrte freie Speicherplatz. 🎜🎜🎜🎜🎜 🎜Welche Attribute werden also verwendet, um positiven und negativen Freiraum zuzuweisen? 🎜

    flex-grow

    • flex-grow Standardwert 0: Wenn es einer positiven Ganzzahl zugewiesen wird, wächst die Größe des Flex-Elements entlang der Hauptachse basierend auf der Flex-Basis und nimmt den verfügbaren Platz ein. Flex-Grow teilt den Wachstumsraum proportional zu. 🎜🎜🎜Ausgangszustand: Wir legen die Breite für alle drei Elemente fest und die Summe ist nicht größer als die Breite der Hauptachse🎜<pre class="brush:php;toolbar:false">.with-same-flex-grow {   * {     flex-grow: 1;   } }</pre>🎜🎜🎜<p>增加的宽度计算方法：假设元素的 <code>flex-grow 值为 x，正向自由空间宽度为l，则每个元素增加的宽度=$\frac{x}{x的总和}*l$，元素最终宽度 = $元素初始宽度 + 增加的宽度$；
      • 相同比例增长：当给每个子元素的都设定相同的 flex-grow 值，每个元素就会增长相同的宽度

      .with-same-flex-grow {
        * {
          flex-grow: 1;
        }
      }

      效果如下：

      

      Berechnung der Breite des ersten Elements in diesem Beispiel 2 00+$\frac{\mathrm{}}{\mathrm{p}x\mathrm{}frac\{1\}\{1+1+1\}*200\; +\; 50\; =\; 116,67px\mathrm{}}\mathrm{}\mathrm{}\mathrm{}1$+

      第二个元素宽度宽度计算 $\frac{1}{1+1+1}*200 + 100 = 166.67px$；

      第三个同理为$216.67px$

      • 不同比例增长：给每个子元素的都设定不同的 flex-grow 值

      .with-different-flex-grow {
        div:nth-child(1) {
          flex-grow: 2;
        }
        div:nth-child(2) {
          flex-grow: 1;
        }
        div:nth-child(3) {
          flex-grow: 1;
        }
      }

      效果如下：

      

      Berechnung der Breite des ersten Elements in diesem Beispiel 2 00+$\frac{\mathrm{}}{\mathrm{p}x\mathrm{}frac\{2\}\{2+1+1\}*200\; +\; 50\; =\; 150px\mathrm{}}\mathrm{}\mathrm{}\mathrm{}2$+

      第二个元素宽度的计算$\frac{1}{2+1+1}*200 + 100 = 150px$；

      第三个同理是$200px$

      • 如果想让开始时尺寸不同的元素内容宽度相等（平分容器宽度），可以将 flex-basis 设置为 0（完全忽略 flex 子元素的尺寸） flex-grow 为 1（等比例分配）

      .average {
        * {
          /* flex: 1 1 0; */
          flex-basis: 0;
          flex-grow: 1;
        }
      }

      效果如下：

      

      flex-shrink

      flex-shrink 属性指定了 flex 元素的缩小值,默认值为 1； 它确定在分配 negative free space 时，flex 子元素相对于 flex 容器中其余 flex 子元素收缩的程度。默认值 1。用于减少盒子空间使盒子适应容器而不溢出(为了避免 border 干扰去掉边框)

      我们给三个元素都设定宽度，并且总和大于主轴宽度；这里我们将元素的flex-shrink值设置为 0 (元素宽度不变，不需要吸收溢出的宽度)，目的是观察一下反向自由空间。

      .flex-shrink-wrapper {
        display: flex;
        div:nth-child(1) {
          width: 100px;
          background: gold;
        }
        div:nth-child(2) {
          width: 200px;
          background: tan;
        }
        div:nth-child(3) {
          width: 300px;
          background: gold;
        }
      }
      .zero {
        * {
          flex-shrink: 0;
        }
      }

      

      Berechnung der absorbierten Breite: Gehen Sie davon aus, dass der Wert jeder Flex-Schrumpfung $x_n$, die anfängliche Breite des Elements beträgt $l_n$ , der umgekehrte freie Speicherplatz ist $\mathrm{Dann\; beträgt\; die\; von\; jedem\; Element\; absorbierte\; Breite:}$∗ l n$\frac{{}_{}{}_{}+}{.{}_{\mathrm{x}}n{}_{\mathrm{l}}n\mathrm{}\mathrm{\ast }\mathrm{L}frac\{x\_n*l\_n\}\{x\_1*l\_1+...+x\_n*l\_n\}*L}$1

      • 给子元素相同的 flex-shrink 值，这里以默认值 1 为例

      .with-same-flex-shrink {
        * {
          flex-shrink: 1;
        }
      }

      

      Zu diesem Zeitpunkt beträgt die Absorptionsbreite des ersten Elements: $1$383 $.3\mathrm{}7p\mathrm{}x\mathrm{}$

      Zu diesem Zeitpunkt beträgt die Absorptionsbreite des ersten Elements: $1$3 . 3$1$ 6

      这时第一个元素的吸收宽度为：$\frac{1*300}{1*100+1*200+1*300}*100 = 50px$，最终元素宽度为 $300-50=250px$

      • 给子元素不同的 flex-shrink 值

      .with-different-flex-shrink {
        div:nth-child(1) {
          flex-shrink: 1;
        }
        div:nth-child(2) {
          flex-shrink: 2;
        }
        div:nth-child(3) {
          flex-shrink: 0;
        }
      }

      

      Zu diesem Zeitpunkt beträgt die Absorptionsbreite des ersten Elements: $\frac{1\ast 100}{1\ast 100+2\ast 200}\ast 100=\; .\; 20px\mathrm{}$ 100−20$1$0

      Zu diesem Zeitpunkt beträgt die Absorptionsbreite des zweiten Elements: $\frac{2\ast 200}{1\ast 100+2\ast 200}\ast 100=\; .\; 80px\mathrm{}$ 200−80$2$0 0

      0

      px$flex 的简写值 一般我们很少见上述属性单独使用，都是用flex这一个简写属性来表述元素的伸缩。 Flex 简写形式允许你把三个数值按这个顺序书写 flex-grow，flex-shrink，flex-basis。以下是常见的几种取值： flex: initial 的扩展为 0 1 auto (不可放大、可缩小、大小与容器元素大小一致) flex: auto 的扩展为 1 1 auto (可放大、可缩小、大小与容器元素大小一致) flex: none 的扩展为 0 0 auto (不可放大、不可缩小、大小与容器元素大小一致) flex: <positive-number></positive-number>的扩展为 <positive-number> 1 0</positive-number> flex: <positive-number></positive-number>的应用： 两栏布局 .two-grid-wrapper {   display: flex;   margin-top: 20px;   height: 200px;   .left {     width: 200px;     background-color: gold;   }   .right {     flex: 1;     background-color: tan;   } } 效果如下：左侧宽度不变，右侧自适应 三栏布局 .three-grid-wrapper {   display: flex;   margin-top: 20px;   height: 200px;   .left {     width: 200px;     background-color: gold;   }   .right {     width: 200px;     background-color: gold;   }   .center {     flex: 1;     background-color: tan;   } } 效果如下：左右宽度不变，中间自适应 PS.flex 子元素没有 positive free space 就不会增长；没有 negative free space 就不会缩小。 结束语 学习八股文的时候发现自己对flex布局很不熟悉，基本概念都说不上来，只会无脑用，于是去学习，然后就诞生了这篇文章。欢迎指正。 （学习视频分享：web前端）$

Das obige ist der detaillierte Inhalt vonEin Artikel, in dem die Auswirkungen von drei Flex-Eigenschaften auf Elemente ausführlich erläutert werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!