Atribut flex CSS

Definisi dan penggunaan

Flex adalah singkatan dari atribut berikut:

Pengaturan flex adalah panjang fleksibel proyek fleksibel.

Keterangan:Jika elemen bukan proyek fleksibel, atribut flex tidak berlaku.

Lihat pula:

Tutorial: CSS flexbox

Referensi:Atribut flex-basis CSS

Referensi:Atribut flex-direction CSS

Referensi:Atribut flex-flow CSS

Referensi:Atribut flex-grow CSS

Referensi:Atribut flex-shrink CSS

Referensi:Atribut flex-wrap CSS

Referensi:HTML DOM flex property

Contoh

Membuat panjang semua item elasti sama, tidak peduli isinya:

#main div {
  -ms-flex: 1; /* IE 10 */ 
  flex: 1;
}

Coba sendiri

Grammar CSS

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

Nilai properti

Nilai Deskripsi
flex-grow Angka, menentukan besarnya pertumbuhan item terhadap item lain yang berelastis.
flex-shrink Angka, menentukan besarnya pengecilan item terhadap item lain yang berelastis.
flex-basis

Panjang item.

Nilai yang sah: "auto"、"inherit"，atau nilai satuan dalam "%", "px", "em", atau unit panjang lainnya.
auto Sama dengan 1 1 auto.
initial Sama dengan 0 1 auto. Lihat initial。
none Sama dengan 0 0 auto.
inherit Mengambil properti ini dari elemen induknya. Lihat inherit。

Detil teknis

Nilai default: 0 1 auto
Inheritance: Tidak
Produksi animasi: Dukungan. Lihat properti yang terpisah. Lihat:Properti yang berhubungan dengan animasi。
Versi: CSS3
Grammar JavaScript: object.style.flex="1"

Contoh lainnya

Gabungkan flex dan media query untuk membuat tata letak yang berbeda untuk ukuran layar/perangkat yang berbeda:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}
.flex-item-left {
  flex: 50%;
}
.flex-item-right {
  flex: 50%;
}
/* Layout responsif - Buat tata letak tunggal (100%) bukannya tata letak ganda (50%) */
@media (max-width: 800px) {
  .flex-item-right, .flex-item-left {
    flex: 100%;
  }
}

Coba sendiri

Dukungan browser

Angka di tabel menunjukkan versi browser pertama yang mendukung atribut ini sepenuhnya.

Angka yang ditandai dengan -webkit-、-ms- atau -moz- menunjukkan versi awal yang digunakan dengan prefiks.

Chrome IE / Edge Firefox Safari Opera
29.0
21.0 -webkit-		 11.0
10.0 -ms-		 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0