Ketahui prosedurnya Catatan:
Untuk mengembangkan program kecil, setiap orang perlu memahami Flex terlebih dahulu. Kerangka pengembangan applet menggunakan tata letak Flex, Ini dapat membantu pengembang untuk membangun tata letak program kecil yang indah dan dapat disesuaikan secara dinamis dengan kecepatan tercepat. tapi, Flex belum banyak dipromosikan dan digunakan sejauh ini , Bahkan banyak pengembang front-end hanya mengetahui Flex setelah mereka memulai program kecil.
Lantas, apa keuntungan menggunakan Flex? Ada berapa mode tata letak di Flex? Bagaimana cara menggunakan tata letak Flex dengan benar?
Hari ini, ketahuilah bahwa program (WeChat ID zxcx0101) akan datang Lihatlah penggunaan Flex yang benar. Saya harap artikel ini dapat membantu Anda, manfaatkan Flex dengan baik untuk membangun program kecil dengan pengalaman yang baik.
Teks | Jiang Jiazhi
Metode tata letak halaman applet WeChat mengadopsi format tata letak Flex , Ini adalah skema tata letak halaman web baru yang diusulkan oleh W3c pada tahun 2009, yang dapat dengan mudah dan lengkap mewujudkan berbagai tata letak halaman yang responsif.
Fitur utama tata letak Flex adalah: Mengizinkan elemen dengan level yang sama untuk mengisi ruang dengan metode yang paling sesuai dalam berbagai ukuran layar. Pada saat yang sama, Flex menyediakan penyelarasan, arah kesejajaran, dan urutan elemen dalam wadah, dan bahkan elemen yang tersusun bisa dinamis atau ukurannya tidak pasti.
Tata letak Flex memiliki karakteristik berikut:
- Ekspansi ke segala arah
- Anda dapat mengganti dan mengatur ulang urutan di lapisan gaya
- Konfigurasi yang mudah dari poros utama dan poros samping
- Peregangan ruang dan pengisian elemen anak
- Sejajarkan di sepanjang wadah
Artikel ini akan memperkenalkan secara singkat penggunaan tata letak Flex di applet WeChat.
Wadah teleskopik
Dalam program kecil, elemen dengan display: flex atau display: block adalah wadah flex (wadah fleksibel), dan elemen anak di dalamnya disebut item flex. Dalam wadah fleksibel, semua elemen anak dapat diatur menggunakan Flex.
- display: blok ditentukan sebagai mode wadah konten blok, selalu mulai ditampilkan dengan baris baru, wadah tampilan (tampilan, gulir-tampilan dan gesekan) dari applet WeChat akan default untuk menampilkan: blok;
- display: flex: Menentukan mode kontainer konten baris. Untuk sub-elemen yang ditampilkan dalam satu baris, Anda dapat menggunakan atribut flex-wrap untuk menentukan apakah dan bagaimana membungkusnya. flex-wrap memiliki tiga nilai: nowrap (tanpa garis membungkus), wrap (garis membungkus ke bawah), dan wrap-reverse (garis membungkus ke atas).
Misalkan kita memiliki kode berikut:
Saat menggunakan display: block (nilai default), efek tampilan adalah sebagai berikut:
Setelah mengubah ke display: flex, efek tampilan adalah sebagai berikut:
Kita dapat dengan jelas melihat perbedaan antara block dan flex dari rendering, yaitu perbedaan antara sub-element view display (block) dan inline display (flex).
Poros utama dan poros samping
Wadah fleksibel dari tata letak Flex dapat diletakkan di segala arah.
Secara default, penampung memiliki dua sumbu: sumbu utama dan sumbu silang.
Posisi awal spindel adalah awal utama, posisi akhir spindel adalah ujung utama, dan panjang spindel adalah ukuran utama.
Demikian pula, titik awal poros samping adalah titik awal silang, posisi ujung adalah ujung silang, dan panjang adalah ukuran silang.
Perhatikan bahwa sumbu utama tidak harus dari kiri ke kanan, demikian pula sumbu lateral tidak harus dari atas ke bawah. Arah sumbu utama dapat dikontrol menggunakan atribut flex-direction, yang memiliki 4 nilai opsional:
- baris: arah horizontal dari kiri ke kanan
- baris-mundur: arah horizontal dari kanan ke kiri
- kolom: arah vertikal dari atas ke bawah
- kolom-terbalik: arah vertikal dari bawah ke atas
Jika arah horizontal adalah sumbu utama, maka arah vertikal tersebut adalah sumbu lateral, dan sebaliknya.
Gambar efek dari empat pengaturan arah sumbu utama:
Contoh pada gambar menunjukkan perbedaan arah susunan menggunakan nilai arah-lentur yang berbeda.
Kode contoh:
melihat > view class = "flex-row" style = "display: flex; flex-direction: row;" > view class = "flex-view-item" > 1 tampilan > view class = "flex-view-item" > 2view > view class = "flex-view-item" > 3view > melihat > view class = "flex-column" style = "display: flex; flex-direction: column;" > view class = "flex-view-item" > c1view > view class = "flex-view-item" > c2view > view class = "flex-view-item" > c3view > melihat > melihat >hasil lari:
Penjajaran
Ada dua cara untuk menyelaraskan elemen anak:
- justify-conent mendefinisikan penyelarasan elemen anak pada sumbu utama;
- align-items mendefinisikan bagaimana elemen anak diratakan pada sumbu silang.
Justify-content memiliki 5 metode penyelarasan opsional:
- flex-start: sejajarkan titik awal dari sumbu utama (nilai default);
- flex-end: sejajarkan titik akhir dari sumbu utama;
- center: rata tengah pada sumbu utama;
- spasi-antara: sejajarkan di kedua ujung, kecuali bahwa elemen anak di kedua ujungnya bersandar pada wadah di kedua ujungnya, jarak antara elemen anak lainnya adalah sama;
- Ruang-sekitar: Jarak antara setiap elemen anak sama, dan jarak antara elemen anak di kedua ujung dan wadah sama dengan jarak antara elemen anak lainnya.
Penjajaran konten justify terkait dengan arah sumbu utama. Gambar berikut menggunakan flex-direction sebagai baris, dan sumbu utama adalah dari kiri ke kanan, menjelaskan efek tampilan dari nilai justify-content 5:
align-item menunjukkan kesejajaran pada sumbu lateral:
- regangkan: isi seluruh wadah (nilai default);
- flex-start: sejajarkan titik awal dari sumbu lateral;
- flex-end: titik akhir sumbu lateral sejajar;
- center: garis tengah pada sumbu lateral;
- baseline: Sejajarkan dengan baris pertama teks dari elemen anak.
Penjajaran yang diatur oleh pelurusan terkait dengan arah sumbu lateral. Gambar berikut menggunakan flex-direction as row, dan lateral axis direction dari atas ke bawah, menjelaskan 5 efek tampilan nilai dari align-items:
Dengan arah sumbu utama dan sumbu samping ditambah pengaturan perataannya, sebagian besar tata letak halaman dapat dicapai.
Saya harap Anda dapat menggunakan artikel ini untuk membiasakan diri dengan tata letak Flex dan mengembangkan pengalaman yang lebih baik.
Alamat asli: Alamat kode sumber: https://github.com/jjz/weixin-mina/blob/master/pages/flex/flex.wxml
Artikel ini dicetak ulang di bawah otorisasi Know Program, ikuti akun WeChat zxcx0101, dan balas "Memulai" untuk mendapatkan artikel seri pengalaman langsung program mini yang paling berharga di seluruh jaringan.
Ikuti program kesadaran dengan cepat
Tahu program (akun WeChat zxcx0101) adalah akun resmi Aifaner yang berfokus pada ekologi program kecil. Kami menyediakan informasi program mini (berita, opini, panduan, aktivitas) dan layanan yang paling lengkap dan segar, di mana Anda dapat mempelajari segala sesuatu tentang program mini.
- World of Warcraft: 8.0 Empat fenomena utama yang menunjukkan bahwa jumlah pemain aliansi atau bahkan menyalip suku?
- Kedua tim dalam pertarungan degradasi Yanbian di Jiangsu memiliki kekurangan masing-masing, tim tuan rumah tidak akan lagi menang atau mengunci tempat degradasi.
- Apple sekali lagi menanggapi iPhone "shutdown tak terduga": Selanjutnya, gunakan pembaruan perangkat lunak
- 19 taman kanak-kanak tingkat pertama di Shanghai ditambahkan pada paruh pertama tahun 2018 ~ Datang dan lihat taman-taman kanak-kanak ini!
- Nissan dalam krisis kepercayaan, para netizen: Ini mudah ditangani, saya akan tunduk kepada semua orang nanti
- World of Warcraft: Perilaku paling menggantikan yang pernah dilakukan pemain. Apakah dia berlutut di depan makam Raja Wa dan tertembak?