Apakah maksud nilai flex 1 dalam css3

Ia bermaksud: nilai nisbah pembesaran item "flex-grow" ialah 1, nilai nisbah pengurangan item "flex-shrink" ialah 1, item "flex-basis" menduduki ruang sebagai "0%"; Singkatan bagi tiga nilai atribut "flex-grow, flex-shrink, dan flex-basis".

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3&&HTML5, komputer Dell G3.

Apakah yang dimaksudkan dengan nilai flex 1 dalam css3

flex sebenarnya ialah singkatan daripada gabungan tiga nilai atribut ini: flex-grow, flex-shrink dan flex-basis syarat setara adalah seperti berikut:

Sintaks:

auto | none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]

Definisi:

• flex-grow: Tentukan nisbah pembesaran item, lalai ialah 0, iaitu, jika terdapat ruang yang tinggal, ia tidak akan membesar.

• flex-shrink: Mentakrifkan nisbah pengecutan item, lalai ialah 1, iaitu jika ruang tidak mencukupi, item akan mengecut.

• asas lentur: Mentakrifkan ruang yang diduduki oleh item sebelum memperuntukkan lebihan ruang. Pelayar menggunakan atribut ini untuk mengira sama ada terdapat ruang tambahan pada paksi utama. Nilai lalainya ialah auto, iaitu saiz asal projek. Jika nilai ialah 0, unit mesti ditambah untuk mengelakkan daripada dianggap boleh skala.

Sifat flex ialah singkatan daripada flex-grow, flex-shrink dan flex-basis. Nilai lalai ialah 0 1 auto. Dua sifat terakhir adalah pilihan.

Butiran:

Flex-grow

Atribut flex-grow mentakrifkan nisbah pembesaran item lalai ialah 0, iaitu, jika terdapat ruang yang tinggal, Nor Grow

Jika semua item mempunyai sifat flex-grow sebanyak 1, ia akan membahagikan ruang yang tinggal (jika ada) sama rata. Jika sifat flex-grow satu item ialah 2 dan item lain semuanya 1, yang pertama akan menduduki dua kali lebih banyak ruang yang tinggal daripada item lain.

Flex-shrink

Atribut flex-shrink mentakrifkan nisbah pengecutan item yang lalai ialah 1, iaitu jika ruang tidak mencukupi, item tersebut akan mengecut. Atribut flex-shrink mentakrifkan nisbah pengecutan item Lalai ialah 1, iaitu, jika ruang tidak mencukupi, item akan mengecut.

Jika sifat flex-shrink bagi semua item ialah 1, apabila ruang tidak mencukupi, semuanya akan dikurangkan secara berkadar. Jika sifat flex-shrink bagi satu item ialah 0 dan item lain adalah 1, yang pertama tidak akan mengecut apabila ruang tidak mencukupi.

Asas lentur

Sifat asas lentur mentakrifkan saiz utama item sebelum memperuntukkan lebihan ruang. Pelayar menggunakan atribut ini untuk mengira sama ada terdapat ruang tambahan pada paksi utama. Nilai lalainya ialah auto, iaitu saiz asal projek.

Ia boleh ditetapkan kepada nilai yang sama seperti atribut lebar atau ketinggian (seperti 350px), kemudian item tersebut akan menduduki ruang tetap.

.item {
flex: 1;
}
/* 等同 */
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}

.item {
flex: auto;
}
/* 等同 */
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}

.item {
flex: none;
}
/* 等同 */
.item {
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
}

.item {
flex: 1 2;
}
/* 等同 */
.item {
flex-grow: 1;
flex-shrink: 2;
flex-basis: 0%;
}

(Mempelajari perkongsian video: tutorial video css)

Atas ialah kandungan terperinci Apakah maksud nilai flex 1 dalam css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!