Flex adalah singkatan dari kotak fleksibel, yang diterjemahkan sebagai "tata letak fleksibel". Ini digunakan untuk memberikan fleksibilitas maksimum untuk model kotak. Wadah apa pun dapat ditetapkan sebagai tata letak fleksibel. ; elemen inline dapat disetel dengan "display:inline-flex" diimplementasikan; perlu dicatat bahwa jika tata letak fleksibel disetel, atribut float, clear, dan vertical-align dari elemen turunan akan menjadi tidak valid.
1. Konsep dasar
Tata letak fleksibel adalah model tata letak, sering disebut flexbox. Setelah menggunakan tata letak fleksibel, ini akan memberikan alokasi ruang dan kemampuan penyelarasan yang kuat untuk elemen turunan.
Sebelum menggunakan flex layout, layout yang umum digunakan antara lain: fluid layout, floating layout, positioning layout, dll. Kerugiannya adalah elemen anak perlu mengontrol posisinya di elemen induk, dan juga memperhatikan ketinggian keruntuhan elemen induk.
Keuntungan fleksibel adalah menghindari bentuk tata letak yang tidak fleksibel, membuat lebih banyak mode tata letak yang dapat Anda pilih, dan menyelesaikan masalah seperti penyelarasan, distribusi, dan respons sub-elemen. Kekurangannya hanya bisa mengandalkan mode tata letaknya sendiri, dan tidak bisa diubah jika ada sedikit perubahan.
Elemen yang menggunakan tata letak fleksibel disebut wadah fleksibel, atau disingkat "wadah". Semua elemen turunannya secara otomatis menghasilkan anggota penampung, yang disebut item fleksibel (item fleksibel), disebut sebagai "item";
Wadah memiliki dua sumbu utama secara default: sumbu utama horizontal (sumbu utama) dan sumbu silang vertikal (sumbu silang). Posisi awal sumbu utama (yaitu perpotongan batas) disebut awal utama, dan posisi akhir disebut ujung utama; posisi awal sumbu silang disebut awal silang, dan posisi akhir disebut ujung silang. Item disusun sepanjang sumbu utama secara default. Ruang sumbu utama yang ditempati oleh satu item disebut ukuran utama, dan ruang sumbu silang yang ditempati oleh satu item disebut ukuran silang.
Properti berikut disediakan di CSS untuk mengimplementasikan tata letak Fleksibel:
Menurut cakupan yang berbeda, properti ini dapat dibagi menjadi dua kategori: properti container (flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content) dan properti item (order, align -self , melenturkan, menumbuhkan fleksibel, menyusutkan fleksibel, berbasis fleksibel). Mari kita perkenalkan penggunaan atribut ini.
2. Properti wadah
(1) arah fleksibel : Menentukan arah susunan sub-elemen dalam kotak fleksibel;
Nilai opsional untuk atribut tersebut adalah sebagai berikut:
Properti flex-direction menentukan arah sumbu utama (yaitu, arah susunan item);
.box{arah-fleksibel:baris|baris-mundur|kolom|kolom-mundur;}Atribut ini memiliki 4 nilai
● baris (nilai default): sumbu utama berbentuk horizontal dan titik awal berada di ujung kiri;
●baris terbalik: Sumbu utama berbentuk horizontal dan titik awalnya berada di ujung kanan;
●kolom: Sumbu utama berbentuk vertikal, dan titik awalnya berada di tepi atas;
●kolom terbalik: Sumbu utama berbentuk vertikal dan titik awalnya berada di tepi bawah;
Efek di atas ditunjukkan pada gambar di bawah ini:
(2) flex-wrap : Menentukan metode pembungkusan sub-elemen dalam kotak fleksibel;
Secara default, item disusun dalam satu garis (juga disebut "sumbu"). Atribut flex-wrap mendefinisikan cara menggabungkan garis jika sumbu tidak dapat disusun.
.box{flex-wrap:nowrap|wrap|wrap-reverse}● nowrap (default): tanpa pembungkusan garis, efek pengaturannya adalah sebagai berikut:
●wrap : wrap, baris pertama paling atas, efek susunannya sebagai berikut:
●wrap-reverse: wrap, baris pertama paling bawah, efek susunannya sebagai berikut:
(3) aliran fleksibel : Properti ini bekerja pada wadah kotak fleksibel dan digunakan untuk mengontrol arah susunan dan pembungkusan garis elemen dalam wadah.
.box{aliran fleksibel:<flex-direction><flex-wrap>;}(4) justify-content : Atribut ini bekerja pada sub-elemen dalam wadah kotak fleksibel dan digunakan untuk mengontrol distribusi sub-elemen itu sendiri dalam arah pengaturan;
Properti justify-content mendefinisikan perataan item pada sumbu utama
.box{justify-content:flex-start|flex-end|center|space-between|space-around;}Atribut ini memiliki 5 nilai:
● flex-start (nilai default): rata kiri;
●ujung fleksibel: rata kanan;
●tengah: terpusat;
●ruang-antara: Sejajarkan kedua ujungnya, dan jarak antar item sama;
●space-around: Jarak pada kedua sisi setiap benda adalah sama, sehingga jarak antar benda dua kali lebih besar dari jarak antara benda dan pembatas;
Efek di atas ditunjukkan pada gambar di bawah ini:
(5) align-items : Atribut ini bekerja pada wadah kotak fleksibel dan digunakan untuk mengontrol penyelarasan semua sub-elemen dalam kotak fleksibel dalam arah vertikal dari arah pengaturan;
Properti align-item menentukan bagaimana item disejajarkan pada sumbu silang
.box{align-items:flex-start|flex-end|center|baseline|stretch;}Atribut ini mempunyai 5 nilai. Penjajaran spesifiknya berkaitan dengan arah sumbu silang. Diasumsikan sumbu silangnya dari atas ke bawah:
●flex-start: menyelaraskan titik awal sumbu silang;
●flex-end: menyelaraskan titik tengah sumbu silang;
●tengah: menyelaraskan titik tengah sumbu silang;
●baseline: perataan garis dasar pada baris pertama teks item;
●stretch (nilai default): Jika item tidak menyetel ketinggian atau disetel ke otomatis, item akan menempati seluruh ketinggian wadah;
Efek di atas ditunjukkan pada gambar di bawah ini:
3. Properti proyek
(1) atribut pesanan
Atribut order digunakan untuk mengatur urutan kemunculan item dalam container. Anda dapat menentukan posisi item dalam container melalui nilai tertentu.
pesanan: nomor;
Dimana number adalah posisi item dalam container, dan nilai defaultnya adalah 0.
Contoh:
<!DOCTYPEhtml><html><head><style>.flex{display:flex;flex-flow:rowwrap;margin-top:10px;}.flexdiv{width:60px;height:60px;margin-bottom:5px; border:1pxsolidblack;}.flexdiv:nth-child(1){order:3;}.flexdiv:nth-child( 2){pesanan:1;}.flexdiv:anak ke-n(3){pesanan:2;}.flexdiv:anak ke-n(4){pesanan:5;}.flexdiv:anak ke-n(5){pesanan: 4;</style></head><body><div><div>A</div><div>B</div><div>C</div><div>D</div><div >E</div></div></body></html>Hasil berjalan:
(2) atribut align-self
Atribut align-s elf memungkinkan Anda menyetel perataan yang berbeda untuk suatu item dibandingkan item lainnya. Nilai opsional untuk atribut align-self adalah sebagai berikut:
Contoh:
<!DOCTYPEhtml><html><head><style>.flex{display:flex;flex-flow:rowwrap;align-items:flex-end;border:1pxsolid#CCC;height:150px;}.flexdiv{width: 60px;tinggi:60px;batas:1 pxsolidblack;}.flexdiv:nth-child(3){align-self:flex-start;}</style></head><body><div><div>A</div><div>B</ div><div>C</div><div>D</div><div>E</div></div></body></html>Hasil berjalan:
(3) atribut fleksibel
Atribut flex merupakan singkatan dari tiga atribut flex-grow, flex-shrink dan flex-basis. Format sintaksnya adalah sebagai berikut:
fleksibel:flex-growflex-shrinkflex-basis;
Deskripsi parameternya adalah sebagai berikut:
● flex-grow: (parameter yang diperlukan) angka yang digunakan untuk mengatur jumlah pertumbuhan item relatif terhadap item lainnya, nilai defaultnya adalah 0;
●flex-shrink: (parameter opsional) angka yang digunakan untuk mengatur penyusutan suatu item relatif terhadap item lainnya.
●flex-basis: (parameter opsional) Panjang item, nilai hukumnya adalah otomatis (nilai default, menunjukkan otomatis), mewarisi (menunjukkan pewarisan nilai atribut ini dari elemen induk) atau menambahkan %, px, em , dll. ke nilai tertentu Bentuk satuannya.
Selain itu, atribut flex mempunyai dua nilai shortcut yaitu auto (1 1 auto) dan none (0 0 auto).
Contoh kodenya adalah sebagai berikut:
<!DOCTYPEhtml><html><head><style>.flex{display:flex;flex-flow:rowwrap;align-items:flex-end;border:1pxsolid#CCC;}.flexdiv{width:60px;height: 60px;batas:1pxsolidblack;}.f lexdiv:nth-child(2){flex:0;}.flexdiv:nth-child(4){flex:11auto;}</style></head><body><div><div>A</div ><div>B</div><div>C</div><div>D</div><div>E</div></div></body></html>Hasil berjalan:
