Flex - Trik CSS

Anonim

The flexproperti adalah sub-properti dari modul Fleksibel Box Layout.

Ini adalah singkatan dari flex-grow, flex-shrinkdan flex-basis. Parameter kedua dan ketiga ( flex-shrinkdan flex-basis) bersifat opsional.

Sintaksis

flex: none | ( ? || ) .flex-item ( /* this */ flex: 1 100px; /* is the same as */ flex-grow: 1; flex-basis: 100px; /* and it leaves the flex-shrink property alone, which would be */ flex-shrink: inherit; /* defaults to 1 */ )

Berikut informasi tentang peta nilai yang bergantung pada berapa banyak nilai yang Anda berikan:

flex: none /* value 'none' case */ flex: /* One value syntax, variation 1 */ flex: /* One value syntax, variation 2 */ flex: /* Two values syntax, variation 1 */ flex: /* Two values syntax, variation 2 */ flex: /* Three values syntax */ flex: inherit

Nilai umum untuk flex

fleksibel: 0 otomatis;

Ini adalah sama dengan flex: initial;dan singkatan untuk nilai default: flex: 0 1 auto. Ini mengukur item berdasarkan width/ heightpropertinya (atau isinya jika tidak disetel).

Itu membuat item flex tidak fleksibel saat ada beberapa ruang kosong yang tersisa, tetapi memungkinkannya untuk menyusut ke minimum ketika tidak ada cukup ruang. Kemampuan atau automargin penyelarasan dapat digunakan untuk menyelaraskan item fleksibel di sepanjang sumbu utama.

fleksibel: otomatis;

Ini sama dengan flex: 1 1 auto. Hati-hati, ini bukan nilai default. Ini mengukur item berdasarkan width/ heightpropertinya, tetapi membuatnya sepenuhnya fleksibel sehingga menyerap ruang ekstra di sepanjang sumbu utama.

Jika semua item yang baik flex: auto, flex: initialatau flex: none, setiap ruang yang tersisa setelah item telah berukuran akan didistribusikan secara merata ke item dengan flex: auto.

flex: none;

Ini sama dengan flex: 0 0 auto. Ini mengukur item sesuai dengan width/ heightpropertinya, tetapi membuatnya tidak fleksibel sepenuhnya.

Ini mirip dengan flex: initialkecuali tidak diperbolehkan menyusut, bahkan dalam situasi meluap.

melenturkan:

Setara dengan flex: 1 0px. Itu membuat item fleksibel fleksibel dan menetapkan dasar fleksibel ke nol, menghasilkan item yang menerima proporsi tertentu dari ruang yang tersisa.

Jika semua item dalam wadah fleksibel menggunakan pola ini, ukurannya akan proporsional dengan faktor fleksibel yang ditentukan.

Demo

Demo berikut menunjukkan tata letak yang sangat sederhana dengan Flexbox berkat flexpropertinya:

Ini sedikit kode yang menyenangkan:

.header, .footer ( flex: 1 100%; ) .sidebar ( flex: 1; ) .main ( flex: 2; )

Pertama, kami telah mengotorisasi item flex untuk ditampilkan pada beberapa baris dengan flex-flow: row wrap.

Lalu kami memberi tahu header dan footer untuk mengambil 100% dari lebar viewport saat ini, apa pun yang terjadi.

Dan konten utama dan kedua sidebar akan berbagi baris yang sama, berbagi ruang yang tersisa sebagai berikut: 66% (2 / (1 + 2)) untuk konten utama, 33% (1 / (1 + 2)) untuk sidebar .

Dukungan Browser

  • (modern) berarti sintaks terbaru dari spesifikasi (misalnya display: flex;)
  • (hybrid) berarti sintaks tidak resmi ganjil dari 2011 (misalnya display: flexbox;)
  • (lama) berarti sintaks lama dari 2009 (misalnya display: box;)
Chrome Safari Firefox Opera YAITU Android iOS
21+ (modern)
20- (lama)		 3.1+ (lama) 2-21 (lama)
22+ (baru)		 12.1+ (modern) 10+ (hibrida) 2.1+ (lama) 3,2+ (lama)

Browser Blackberry 10+ mendukung sintaks baru.

Untuk informasi lebih lanjut tentang cara menggabungkan sintaks untuk mendapatkan dukungan browser terbaik, lihat artikel ini (Trik CSS) atau artikel ini (DevOpera).