Artikel yang menerangkan secara terperinci kesan tiga sifat flex pada elemen

Semasa pembangunan, atribut flex sering digunakan untuk bertindak pada elemen anak kotak fleksibel, seperti: flex:1 atau flex: 1 1 auto Jadi bagaimana atribut ini mengawal tingkah laku unsur? flex:1Apa sebenarnya maksudnya? Biarkan artikel ini membawa anda melalui pemahaman menyeluruh tentang sifat flex! [Pembelajaran yang disyorkan: tutorial video css]

Pertama sekali, kita perlu memahami bahawa flex ialah singkatan daripada tiga atribut flex-grow, flex-shrink dan flex-basis Anda boleh menggunakan satu atau dua, atau tiga nilai yang menentukan atribut flex. Untuk sintaks tertentu, sila rujuk MDN-flex

Seterusnya, kami akan membongkar kesan ketiga-tiga atribut ini pada elemen satu demi satu

flex- asas

asas lentur mentakrifkan saiz subelemen lentur yang dimulakan sebelum peruntukan ruang berlaku, atribut 默认值 auto saiz subelemen lentur sebelum ia terbentang atau mengecut.

Jika asas-flex ditetapkan kepada auto, penyemak imbas akan terlebih dahulu menyemak sama ada saiz utama elemen anak fleksibel ditetapkan kepada nilai awal elemen anak fleksibel.

Contohnya, jika anda telah menetapkan lebar 150px untuk elemen anak fleksibel anda, maka 150px ialah asas-flex bagi elemen anak fleksibel ini, jika tidak ditetapkan, auto akan diselesaikan mengikut saiz kandungannya . Dalam contoh ini, lebar elemen pertama ditetapkan kepada 150px, dan lebar elemen kedua dan ketiga tidak ditetapkan.

:first-child {
  width: 150px;
}

Kesannya adalah seperti berikut:

Jika anda mahu flexbox mengabaikan sepenuhnya saiz elemen anak flex, tetapkan flex-basis kepada 0 . Dengan cara ini, walaupun elemen 1 mempunyai set lebar, lebar terakhirnya ialah lebar kandungan.

Ruang bebas positif dan negatif

Mari kita lihat dua konsep sebelum memperkenalkan dua sifat yang tinggalpositive free space Ruang kebebasan positif dan negative free spaceruang kosong terbalik:

• ruang kosong ke hadapan

  Sebagai contoh, terdapat bekas lentur lebar 500px dan nilai atribut arah lentur ialah baris , tiga Elemen kanak-kanak fleksibel 100px lebar, maka 200px yang tidak diisi ialah ruang kosong positif.

• Terbalikkan ruang kosong

  Apabila jumlah lebar elemen kanak-kanak lebih besar daripada lebar bekas, limpahan Saiz 100px ialah ruang kosong terbalik.

Jadi apakah atribut yang digunakan untuk memperuntukkan ruang bebas positif dan negatif?

flex-grow

• flex-grow 默认值 0, jika diberikan integer positif, elemen flex akan menjadi lentur - asas adalah asas, membesar dalam saiz di sepanjang paksi utama, dan mengambil ruang yang ada. flex-grow memperuntukkan ruang pertumbuhan secara berkadar.

Keadaan awal: Kami menetapkan lebar untuk ketiga-tiga elemen dan jumlahnya tidak lebih besar daripada lebar paksi utama

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

增加的宽度计算方法：假设元素的 flex-grow 值为 x，正向自由空间宽度为l，则每个元素增加的宽度=$\frac{x}{x的总和}*l$，元素最终宽度 = $元素初始宽度 + 增加的宽度$；

• 相同比例增长：当给每个子元素的都设定相同的 flex-grow 值，每个元素就会增长相同的宽度

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

效果如下：

Pengiraan lebar elemen pertama dalam contoh ini$fraksi{1}{ 1 1 1}*200 50 = 116.67px$;

第二个元素宽度宽度计算 $\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;
  }
}

效果如下：

Pengiraan lebar elemen pertama dalam contoh ini$pecahan{2}{ 2 1 1}*200 50 = 150px$;

第二个元素宽度的计算$\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;
  }
}

Pengiraan lebar penyerapan: Andaikan bahawa nilai setiap pengecutan lentur ialah $x_n$, lebar awal elemen ialah $l_n$, bebas terbalik ruang untuk$L$Maka lebar yang diserap oleh setiap elemen ialah: $frac{x_n*l_n}{x_1*l_1 ... x_n*l_n}*L$

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

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

Pada masa ini, lebar penyerapan elemen pertama ialah: $frac{1* 100} {1*100 1*200 1*300}*100 = 16.67px$, lebar elemen akhir ialah $100-16.67px=83. 🎜>$

Pada masa ini, lebar penyerapan elemen pertama ialah: $frac{1* 200} {1*100 1*200 1*300}*100 = 33.33px$, lebar elemen akhir ialah $200-36.33=1px 🎜>$

这时第一个元素的吸收宽度为：$\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;
  }
}

Pada masa ini, lebar penyerapan elemen pertama ialah: $frak{1*100}{1*100 2*200}*100 = 20px$=80p$\mathrm{}100-20\; =80px\mathrm{}\mathrm{}10$−

Pada masa ini, lebar penyerapan elemen kedua ialah: $frak{2*200}{1*100 2*200}*100 = 80px$=120p$\mathrm{}200-80\; =120px\mathrm{}\mathrm{}20$−x

300px$\mathrm{}30$x

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前端）

Atas ialah kandungan terperinci Artikel yang menerangkan secara terperinci kesan tiga sifat flex pada elemen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!