Lentur - Trik CSS

Properti flexini adalah sub-hak milik modul Flexible Box Layout.

Ini adalah singkatan untuk flex-grow, flex-shrinkdan flex-basis. Parameter kedua dan ketiga ( flex-shrinkdan flex-basis) adalah pilihan.

Sintaks

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 */ )

Inilah maklumat mengenai nilai yang dipetakan 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 sepunya untuk flex

flex: 0 automatik;

Ini adalah sama seperti flex: initial;dan trengkas untuk nilai lalai: flex: 0 1 auto. Ini memberi ukuran item berdasarkan width/ heightsifatnya (atau kandungannya jika tidak ditetapkan).

Ini menjadikan item lentur tidak fleksibel ketika ada beberapa ruang kosong yang tersisa, tetapi memungkinkan untuk mengecil ke minimum apabila tidak ada ruang yang cukup. Keupayaan atau automargin penjajaran dapat digunakan untuk menyelaraskan item lentur di sepanjang paksi utama.

flex: automatik;

Ini bersamaan dengan flex: 1 1 auto. Hati-hati, ini bukan nilai lalai. Ini ukuran item berdasarkan width/ heightsifatnya, tetapi menjadikannya fleksibel sepenuhnya sehingga mereka menyerap ruang tambahan di sepanjang paksi utama.

Sekiranya semua item sama ada flex: auto, flex: initialatau flex: none, ruang yang tersisa setelah item itu diukur akan diedarkan secara merata ke item dengan flex: auto.

flex: tiada;

Ini bersamaan dengan flex: 0 0 auto. Ini ukuran item mengikut width/ heightsifatnya, tetapi menjadikannya tidak fleksibel sepenuhnya.

Ini serupa dengan flex: initialkecuali tidak dibiarkan menyusut, bahkan dalam keadaan limpahan.

lentur:

Setaraf dengan flex: 1 0px. Ia menjadikan item flex menjadi fleksibel dan menetapkan asas flex menjadi sifar, menghasilkan item yang menerima bahagian yang ditentukan dari ruang yang tinggal.

Sekiranya semua item dalam bekas flex menggunakan corak ini, ukurannya akan sebanding dengan faktor flex yang ditentukan.

Demo

Demo berikut menunjukkan susun atur yang sangat sederhana dengan Flexbox terima kasih kepada flexharta tanah:

Berikut adalah sedikit kod:

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

Pertama, kami membenarkan item flex untuk dipaparkan pada beberapa baris dengan flex-flow: row wrap.

Kemudian kami memberitahu kepada header dan footer untuk mengambil 100% lebar viewport semasa, tidak kira apa.

Dan kandungan utama dan kedua bar sisi akan berkongsi baris yang sama, berkongsi ruang yang tinggal seperti berikut: 66% (2 / (1 + 2)) untuk kandungan utama, 33% (1 / (1 + 2)) untuk bar sisi .

Sokongan Penyemak Imbas

• (moden) bermaksud sintaks terbaru dari spesifikasi (contohnya display: flex;)
• (hibrid) bermaksud sintaksis tidak rasmi yang ganjil dari 2011 (mis. display: flexbox;)
• (lama) bermaksud sintaks lama dari 2009 (mis. display: box;)

Chrome	Safari	Firefox	Opera	IE	Android	iOS
21+ (moden) 20- (lama)	3.1+ (lama)	2-21 (lama) 22+ (baru)	12.1+ (moden)	10+ (kacukan)	2.1+ (lama)	3.2+ (lama)

Penyemak imbas Blackberry 10+ menyokong sintaks baru.

Untuk maklumat lebih lanjut mengenai cara mencampurkan sintaks untuk mendapatkan sokongan penyemak imbas terbaik, rujuk artikel ini (Trik CSS) atau artikel ini (DevOpera).