tutorial pengembangan web terbaru
 

Style flex Property

<Style Object

Contoh

Biarkan semua item yang fleksibel menjadi panjang yang sama, regardles isinya:

for (i = 0; i < y.length; i++) {
    y[i].style.flex = "1";
}
Cobalah sendiri "

Definisi dan Penggunaan

Set properti fleksibel atau mengembalikan panjang item, relatif terhadap seluruh item flexibel dalam wadah yang sama.

Properti fleksibel adalah singkatan untuk flexGrow, flexShrink, dan sifat flexBasis.

Note: Jika elemen bukan barang yang fleksibel, properti fleksibel tidak berpengaruh.

Dukungan Browser

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Properti fleksibel didukung di semua browser utama, kecuali untuk Safari.

Catatan: Properti fleksibel tidak didukung IE 9 atau sebelumnya, di IE 10 properti ini didukung dengan awalan MS. IE11 dan versi yang lebih baru mendukung sepenuhnya properti fleksibel (tidak perlu awalan ms).

Catatan: Safari 6.1+ mendukung alternatif, properti WebkitFlex.

Sintaksis

Kembali properti fleksibel:

object .style.flex

Mengatur properti fleksibel:

object .style.flex=" Nilai properti
Nilai Deskripsi
flex-grow Sejumlah menentukan berapa banyak item akan tumbuh relatif terhadap sisa barang-barang yang fleksibel
flex-shrink Sejumlah menentukan berapa banyak item akan menyusut relatif terhadap sisa barang-barang yang fleksibel
flex-basis Panjang item. Nilai-nilai hukum: "auto" , "inherit" , atau nomor diikuti oleh "%" , "px" , "em" atau satuan panjang lainnya
auto Sama seperti 1 1 auto.
initial Sama seperti 0 1 auto. Baca tentang awal
none Sama seperti 0 0 auto.
inherit Mewarisi properti ini dari elemen induknya. Baca tentang mewarisi

Rincian teknis

Nilai default: 0 1 auto
Kembali Nilai: Sebuah String, yang mewakili properti flex elemen
CSS Versi CSS3

Pages terkait

Referensi CSS: flex property

HTML DOM STYLE Referensi: flexBasis property

HTML DOM STYLE Referensi: flexDirection property

HTML DOM STYLE Referensi: flexFlow property

HTML DOM STYLE Referensi: flexGrow property

HTML DOM STYLE Referensi: flexShrink property

HTML DOM STYLE Referensi: flexWrap property

<Style Object