5 jebakan yang harus dihindari saat beralih ke sistem tata letak Flexbox Divi 5

Divi 5 baru saja mengirimkan sistem tata letak berbasis Flexbox yang semuanya baru. Ini menggantikan mesin tata letak blok lama Divi 4 dan membuka kontrol baru yang kuat tepat di pembangun visual. Setiap baris baru sekarang default untuk melenturkan tata letak. Kecuali Anda sudah menggunakan CSS FlexBox, perubahan ini menuntut pola pikir desain baru karena Flex bekerja secara berbeda. Jika Anda tidak menyesuaikan kebiasaan Anda, Anda akan macet.

Pembaruan ini memberi Anda kontrol visual untuk pembungkus, arah, jarak, pemesanan, dan penyelarasan - semuanya dibangun. Tidak ada CSS kustom hacky. Ini juga dilengkapi dengan jalan pintas baris yang telah dikonfigurasi sebelumnya untuk membangun struktur baris yang kompleks dengan tweake minimal pengaturan tampilan. Beberapa fitur berbasis blok, seperti bagian khusus dan lebar penuh, sudah usang karena Flex sekarang mencakup semua kasus penggunaan ini.

Posting ini masuk ke lima jebakan terbesar yang akan Anda tekan saat mengganti model mental Anda dari blok ke melenturkan di Divi 5.

Jebakan #1: Memaksa Flex menjadi pola pikir blok

→ Flex membutuhkan model mental baru, bukan hanya kontrol baru.

Tidak ada yang suka berubah kecuali mereka tahu mereka mencapai batasan yang sangat nyata. Bagi banyak orang, sistem tata letak lama adalah apa yang mereka ketahui dan nyaman. Tetapi memang memiliki keterbatasan. Mereka yang cukup tahu tentang CSS tahu bahwa sistem lama itu kehilangan hal -hal yang dirancang untuk memperbaiki Flexbox. Menghindari jebakan pertama membutuhkan pemahaman bahwa FlexBox bukan hanya tata letak blok dengan opsi tambahan .

Dalam Divi 4, modul ditumpuk secara vertikal secara default - setiap elemen duduk di bawah yang sebelumnya. Anda dapat menumpuk hal -hal secara horizontal dengan kolom, tetapi pada saat itu, Anda akan bekerja dengan beberapa baris + kolom di dalam bagian untuk membangun tata letak. Itu dapat diprediksi dan nyaman bagi banyak orang, tetapi juga menyebabkan realitas frustasi karena tidak dapat memiliki dua tombol berdampingan dan tantangan desain lainnya.

Divi 5 bekerja secara berbeda sekarang karena wadah baru (yaitu, bagian, baris, kolom, dan grup) diatur ke "flex" secara default. Anda mendapatkan opsi yang lebih spesifik di tingkat kontainer untuk mengatur elemen anak. Flexbox sangat kuat karena memungkinkan untuk tata letak yang fleksibel di mana elemen diposisikan berdasarkan ruang yang tersedia dan konten di dalamnya. Lebih lanjut tentang itu di jebakan berikutnya . Ini memungkinkan tata letak untuk beradaptasi dengan berbagai ukuran layar dan konten tanpa mengandalkan posisi tetap atau absolut. Inilah satu contoh untuk membandingkan fleksibel dengan blok.

Modul Stacks Layout Block secara vertikal di sepanjang sumbu blok. Flexbox memungkinkan Anda memilih antara baris dan kolom sebagai sumbu utama.

Setiap pengaturan dan opsi dalam UI sesuai secara langsung dengan properti CSS aktual yang ditambahkan ke setiap wadah.

Jebakan #2: Tidak tahu seberapa flex menyusut & tumbuh sesuai dengan ukuran elemen anak

→ Tanpa menyusut dan tumbuh, tata letak Anda tidak akan berperilaku seperti yang diharapkan.

Dengan Flex di Divi 5, modul anak dapat memiliki lebar atau tinggi yang ditetapkan. Selain itu, mereka dapat menyusut atau mengisi (lebar atau tinggi) tergantung pada ruangan di dalam wadah. Dalam contoh ini, modul teks diatur ke lebar 45%, yang berarti bahwa dua modul akan pas secara horizontal seolah -olah di baris yang sama. Tetapi jika kami menambahkan jumlah modul teks yang aneh, kami tidak ingin ada ruang kosong. Kami dapat mengatur modul -modul ini untuk memiliki fleksibel, dan kemudian ketika ada ruang yang tersedia secara berurutan, modul -modul ini akan tumbuh menjadi terisi.

Divi memaparkan kontrol seperti "tumbuh untuk mengisi", "menyusut untuk pas", dan pengaturan khusus pada elemen anak dalam setiap wadah fleksibel (elemen anak> desain> ukuran> tumbuh untuk mengisi, menyusut agar sesuai, atau adat ).

Menetapkan tinggi dan lebar pada elemen anak terasa akrab jika Anda terbiasa memblokir tata letak. Tetapi dengan flexbox, tumbuh dan menyusut pengaturan memungkinkan Anda menggabungkan ukuran tetap dengan perilaku responsif - beradaptasi dengan ruang yang tersedia di setiap wadah. Ini menambah kompleksitas, tetapi juga membuka fleksibilitas yang jauh lebih banyak.

Kecilkan agar pas dan tumbuh untuk diisi (selain flex-basis) juga sangat berguna dalam membantu Anda membuat tata letak yang responsif. Agar tata letak blok sering responsif, Anda perlu mengatur beberapa breakpoint dan lebar/ketinggian di masing -masing breakpoint tersebut. Flexbox dapat mengambil manfaat dari pengaturan unik di berbagai breakpoint, tetapi seperti namanya, itu sangat fleksibel . Ini terutama terjadi saat menggunakan klem () untuk tipografi. Menggunakan keduanya bersama -sama, bersama dengan unit CSS relatif lainnya, akan mematahkan kebutuhan Anda yang konstan untuk breakpoint.

Mari kita lihat contoh lain yang dibangun dengan FlexBox.

Wadah kolom (induk) diatur untuk melenturkan dengan pengaturan ini:

• Kesenjangan horizontal dan vertikal : 30px (ini bisa menggunakan calc atau penjepit menjadi sedikit lebih baik, bahkan)
• Arah Tata Letak : Baris Terbalik (Penjelasan untuk Keputusan ini dalam Jebakan #4)
• Justifikasi Konten : Pusat
• Sejajarkan item : tengah
• Flex Wrap : Wrap Reverse (Penjelasan untuk Keputusan ini dalam Perangkap #4)

Saya kemudian menempatkan tiga elemen anak di dalam kolom. Modul heading, modul pembagi, dan modul teks. Berikut adalah pengaturan yang relevan untuk masing -masing:

• Modul Heading
  • Ukuran teks : klem (2rem, 1.5rem + 2vw, 3rem)
  • Lebar : Auto
  • Ukuran fleksibel : menyusut agar pas
• Modul pembagi
  • Lebar : Auto
  • Ukuran fleksibel : menyusut agar pas dan tumbuh untuk diisi
• Modul teks
  • Ukuran teks : klem (0,9375rem, 0,75rem + 0,4VW, 1rem)
  • Lebar : Auto
  • Ukuran fleksibel : menyusut agar pas

Dengan arah fleksibel baris, elemen anak berbaris secara horizontal setiap kali ada ruang. Modul teks adalah yang terluas, sehingga mengisi barisnya sendiri. Modul Divider kemudian tumbuh atau menyusut karena memiliki lebar-lebar dan fleksibel dan fleksibel diaktifkan. Modul header hanya menggunakan lebar intrinsiknya dan tetap kompak. Pengaturan ini menghasilkan tata letak yang sepenuhnya responsif tanpa breakpoint.

Jebakan #3: Tidak melanggar kebiasaan margin

→ Gunakan GAP sebagai gantinya - lebih pintar, lebih bersih, dan dibuat untuk Flex.

Dalam Divi 4, celah visual antara modul dan elemen lain membutuhkan margin (celah vertikal melalui margin bawah, celah horizontal melalui margin kiri/kanan). Ketika celah diterapkan pada jarak kolom, Divi 4 memiliki pengaturan talang, tetapi tidak mengambil nilai CSS standar, dan sebenarnya menggunakan margin ke sisi kolom untuk membuat celah. Ini adalah cara yang sama dengan tata letak blok masih berfungsi. Tapi sekarang ada pendekatan yang lebih bersih dan lebih efektif.

Sistem Flexbox Divi 5 memperkenalkan kontrol baris dan celah vertikal di bawah desain> tata letak > celah horizontal dan vertikal . Peta ini ke CSS Gap dan Row-Gap. Kesenjangan vertikal berlaku secara otomatis untuk setiap "baris fleksibel" saat item membungkus ke baris baru. Hal yang sama berlaku untuk celah horizontal: setiap kali ada elemen anak di sebelah satu sama lain, celah akan ada. Pengaturan kesenjangan ini juga menerima unit CSS positif, sehingga Anda dapat menggunakan klem () atau calc () untuk membuat jarak celah yang responsif.

Ini mengurangi kebutuhan untuk menerapkan nilai margin untuk setiap elemen anak. Pengaturan kesenjangan beradaptasi secara otomatis berdasarkan arah fleksibel dan jumlah anak -anak dalam wadah untuk menerapkan celah apa pun secara otomatis. Margin masih memiliki tempat mereka, tetapi kebutuhan mereka akan spasi elemen di dalam wadah berkurang.

Jebakan #4: Kontrol aliran balik & pemesanan yang kurang digunakan

→ Pesanan visual dan pesanan semantik tidak harus cocok.

Secara default, elemen anak dalam wadah fleksibel akan ditampilkan dalam urutan sumbernya. Flexbox dan Divi 5 memberi Anda kemampuan untuk menentukan arah fleksibel terbalik dan kontrol pesanan untuk mengubah aliran visual elemen tanpa mengubah pemesanan elemen HTML.

Arah terbalik beralih di bawah arah tata letak memungkinkan Anda membalikkan urutan elemen baik dalam arah baris atau kolom. Untuk melihat contoh tata letak dari jebakan #2 lagi, kita bisa melihat mengapa kita menginginkan ini. Anda dapat melihat di Layers tampilan bahwa urutan elemen anak adalah tajuk, lalu pembagi, dan akhirnya modul teks. Secara semantik, memiliki tajuk (H2 dalam hal ini) di bagian atas tumpukan masuk akal bagi pembaca layar. Namun, heading cukup jelas secara visual, baik yang pertama atau terakhir, karena kami menggunakan hierarki visual dengan ukuran teksnya.

Menggunakan Reverse Reverse sebagai arah Flex dan Bungkus Balik mempertahankan pemesanan HTML (penting untuk aksesibilitas) sambil juga memungkinkan saya untuk merancang hal -hal bagaimana kami membayangkannya.

Anda dapat mencapai yang sama menggunakan pemesanan elemen anak, yang ditemukan di Divi saat mengklik pada Pengaturan Elemen Anak> Tab Konten> Pesanan . Kita dapat mengubah urutan di mana hanya elemen ini yang akan muncul. Dalam contoh ini, kami mencapai hasil akhir yang sama, tetapi dengan pengaturan yang berbeda - yang mungkin lebih masuk akal bagi sebagian orang.

Jebakan #5: lupa mengatur bungkus

→ Flex tidak akan pecah ke baris baru kecuali Anda mengatakannya.

Kami menyebutkan pembungkus sebelumnya, tetapi layak untuk bagiannya sendiri. Wadah fleksibel baru default ke No Wrap. Ini dapat memiliki konsekuensi yang tidak terduga. Misalnya, jika Anda menambahkan empat modul anak, masing -masing pada lebar 50%, Anda akan mengharapkannya untuk menunjukkan pada dua baris fleksibel. Masalah Anda hanyalah bahwa Anda harus membiarkan wadah Anda membungkus.

Divi termasuk sakelar yang disebut tata letak, yang memiliki tiga negara bagian: tidak ada bungkus, bungkus, dan bungkus. Anda harus mengaktifkan Wrap jika Anda ingin modul pecah ke garis baru di ambang batas. Begitulah cara Divi mendukung struktur multi-baris di dalam satu wadah (bersarang atau beberapa baris bukan satu-satunya cara untuk melakukan ini sekarang).

Luangkan waktu Anda untuk menguasai flexbox

Flex di Divi 5 lebih kuat daripada sistem tata letak blok-saja Divi sebelumnya. Namun, itu membutuhkan beberapa pembelajaran untuk memahami. Flexbox bukan pengaturan khusus divi, jadi penting bagi Anda untuk mengetahui dasar-dasar cara kerja alat CSS ini. Divi memudahkan untuk diimplementasikan karena semua pengaturan yang dapat Anda terapkan di CSS tersedia langsung di editor. Tetapi konsepnya sangat berbeda dari blok.

Karena perbedaan itu, kami sangat menyarankan Anda menghabiskan satu jam menggunakan alat pengajaran interaktif untuk memahami FlexBox. Salah satu yang mudah digunakan dan benar -benar triknya adalah flexboxfroggy.com. Ini membawa Anda melalui 24 tantangan yang semakin kompleks, mengajari Anda semua dasar -dasarnya. Ini jauh lebih baik daripada doomcrolling selama satu jam.

Gunakan Flex dengan Divi 5 hari ini

Flexbox di Divi 5 adalah jujur. Itu tidak menebak apa yang Anda inginkan. Itu meminta Anda untuk memutuskan. Tetapi begitu Anda memutuskan, fleksibilitas mengikuti. Anda dapat membangun setiap struktur tata letak secara bertanggung jawab, responsif, dan andal - bahkan bersarang tanpa batas - tanpa CSS atau peretasan khusus.