Panduan Desainer untuk Flexbox dan Grid

Apa yang perlu diketahui desainer tentang alat tata letak transformasional ini.

CSS telah berjalan jauh sejak diperkenalkan pada tahun 1996, tetapi alat yang kami miliki untuk tata letak belum banyak berubah. Tata letak meja terlalu kaku, tata letak berbasis float pada dasarnya adalah retasan, tata letak berbasis posisi tidak dapat beradaptasi, dan tidak ada yang bisa menangani banyak kompleksitas dengan cara yang efisien. Jangan salah paham - metode ini membuat kami sangat jauh, tetapi mereka tidak dimaksudkan untuk tujuan tata letak yang rumit.

Kedatangan singkat dari metode-metode lama untuk tata letak ini menjadi semakin jelas dengan desain web yang responsif, di mana merangkul fluiditas Web merupakan hal mendasar.

Dengan flexbox dan kisi, kami akhirnya memiliki alat yang ditujukan khusus untuk tata letak yang lebih efisien dan batal dari peretasan yang diperlukan dengan metode tata letak sebelumnya. Mereka membuka kemungkinan baru untuk masalah lama, mengaktifkan hal-hal yang sebelumnya tidak mungkin dilakukan, dan menyelesaikan masalah nyata yang kita hadapi dengan desain web yang responsif.

Flexbox

Flexbox, alias kotak fleksibel CSS, adalah metode tata letak baru yang memberi kami kontrol pelurusan yang tidak dapat dihasilkan metode CSS lainnya. Itu unggul di 'tata letak mikro': kemampuan untuk menyelaraskan, memesan, dan mendistribusikan ruang di antara item dalam wadah, atau mengubah lebar atau tinggi elemen untuk paling baik mengisi ruang yang tersedia.

Pembungkus yang Ditingkatkan

Dalam Desain Web Responsif, lebar yang tersedia bervariasi ketika lebar viewport berubah ukuran. Ini dapat menyebabkan pembungkus konten yang tidak diinginkan, terutama ketika konten lebih panjang dari yang dirancang untuk, atau wadah konten terlalu sempit. Kita semua mungkin pernah melihat sebelumnya: desain menyumbang panjang konten 'ideal', tetapi segera setelah itu diterapkan dan konten nyata ditambahkan, konten tersebut terbungkus ke baris berikutnya karena tidak ada cukup ruang atau keluar dari isinya. wadah. Keduanya tidak ideal, dan dapat menyebabkan layout rusak.

Masalahnya adalah tidak yakin ruang yang tersedia akan selalu cukup besar untuk mengakomodasi konten yang panjangnya bisa bervariasi. Secara tradisional, kami telah menggunakan Kueri Media CSS untuk menyesuaikan tata letak di breakpoints tertentu untuk mengurangi masalah dengan pembungkus konten. Tetapi Kueri Media tidak memperhitungkan panjang konten itu sendiri - mereka merespons lebar atau tinggi eksplisit. Ini sering menghasilkan permintaan media yang berlebihan untuk mengontrol konten tertentu pada breakpoints eksplisit.

Contoh pembungkus yang ditingkatkan dengan Flexbox

Flexbox menyelesaikan masalah ini dengan memungkinkan kami memanfaatkan ruang yang tersedia dan kemudian membungkus konten saat tidak ada. Perilaku penyesuaian otomatis ini tidak hanya nyaman, tetapi meningkatkan pemeliharaan karena kami tidak harus bergantung pada breakpoint untuk menyesuaikan styling secara manual. Contoh di atas menunjukkan perilaku ini: menampilkan label lokasi yang berdekatan dengan judul jika tersedia cukup ruang, dan sejajarkan label lokasi ke kiri di bawah judul jika ruang yang cukup tidak tersedia.

Metode tradisional seperti mengambang akan menghasilkan label lokasi tetap selaras-kanan pada viewports yang lebih kecil, yang kurang dari ideal. Anda dapat memperbaikinya dengan mengapungkan label ke kiri pada breakpoint tertentu. Masalah dengan pendekatan ini adalah sekarang Anda bergantung pada breakpoint untuk mengubah gaya konten Anda, yang panjangnya bisa bervariasi.

Peningkatan Penjajaran & Penjajaran

Ketika berbicara tentang penspasian dan penyelarasan dalam CSS, kami harus pintar untuk menyelesaikan apa pun yang bukan perilaku default. Bahkan efek yang tampak sepele bisa rumit di CSS, seperti perataan vertikal atau membagi ruang secara merata di antara item, harus bergantung pada solusi atau peretasan. Beberapa hal benar-benar mustahil untuk dicapai.

Flexbox memecahkan ini dengan mengaktifkan distribusi ruang antara jumlah item yang tidak diketahui dalam area dengan lebar atau tinggi yang tidak diketahui, dan menyelaraskan item pada sumbu X atau Y. Ini berfungsi seperti halnya alat desain seperti Sketch atau Illustrator dapat mengontrol spasi dan penyelarasan, memungkinkan kontrol yang kami harapkan di Web.

Contoh distribusi ruang yang ditingkatkan dengan Flexbox

Contoh yang bagus dari kontrol ini dapat dilihat di atas: item navigasi didistribusikan secara merata, berpusat vertikal, dan item pertama dan terakhir rata ke tepi wadah navigasi. Ini tidak mungkin menggunakan metode tradisional seperti menerapkan inline block ke item, atau mengandalkan tata letak tabel.

Pesanan Sumber

Urutan sumber mengacu pada urutan elemen yang ditampilkan pada halaman berdasarkan tempat elemen tersebut muncul dalam HTML. Secara default, elemen akan ditampilkan dari atas ke bawah dan dari kiri ke kanan secara default - lebarnya ditentukan oleh properti tampilannya.

Urutan sumber alami dokumen harus memandu Anda ketika berpikir tentang bagaimana desain Anda akan beradaptasi dengan berbagai lebar viewport, tetapi ada kalanya berguna untuk memodifikasinya untuk mengatur ulang item. Satu-satunya cara untuk melakukan ini sebelum flexbox adalah menyembunyikan elemen dan menampilkan yang lain, menghasilkan duplikat HTML, atau mengandalkan posisi absolut, yang tidak selalu berfungsi ketika konten dapat bervariasi dalam ukuran. Dengan flexbox, Anda dapat dengan mudah mengubah urutan item fleksibel tanpa perlu memodifikasi struktur HTML yang mendasarinya.

Contoh pemesanan barang dengan Flexbox

Contoh di atas menunjukkan pemesanan di Flexbox: kami menampilkan logo di sisi kiri footer, yang konsisten dengan header. Pada viewports kecil, kami menampilkan lokasi sebelum logo. Penataan ulang ini masuk akal karena lokasi lebih penting dalam konteks ini.

Tata Letak Kotak

Layout grid CSS adalah sistem layout dua dimensi yang dibuat khusus untuk Web. Ini memberi kita kemampuan untuk membagi halaman menjadi beberapa wilayah yang masing-masing dapat didefinisikan lebih lanjut dalam hal ukuran, posisi, dan lapisan, menghasilkan kerangka kerja asli yang sangat kuat.

Cocok untuk Tujuan

CSS tidak pernah benar-benar cocok dengan alat tata letak tujuan, jadi kami harus cukup inventif dengan cara kami dapat menerapkan kisi untuk pekerjaan kami. Kerangka kerja grid telah muncul untuk memenuhi kebutuhan ini, tetapi bukan tanpa memperkenalkan masalah mereka sendiri. Banyak kerangka kerja grid paling populer membutuhkan definisi tata letak di markup, yang dapat menyebabkan kode mengasapi, masalah pemeliharaan, dan mengaburkan pemisahan struktur dokumen dan presentasi.

Dengan kisi, kita tidak lagi membutuhkan kerangka kerja kisi — itu kerangka asli yang dimasukkan langsung ke CSS. Hal ini memungkinkan kita untuk mendefinisikan tata letak di CSS dengan cara yang intuitif, sambil merangkul fluiditas default Web. Kemampuan alat tata letak baru ini tidak terbatas, dan memungkinkan kami untuk menyelesaikan tata letak yang hanya mungkin dengan Javascript sebelum kedatangannya.

Contoh Tata Letak Kotak

Tata Letak Web Generasi Selanjutnya

Ketika datang ke tata letak, kami telah terjebak dalam kebiasaan cukup lama. Pola yang mapan dan keterbatasan alat tata letak sebelumnya di CSS telah membawa kami ke jalur homogenitas tata letak di masa lalu. Anda tidak perlu pergi jauh di Web untuk menemukannya: header, konten utama, sidebar, footer.

Kedatangan desain web responsif telah memulai beberapa ide baru untuk tata letak halaman, dan dengan itu beberapa pola yang baik mulai muncul: parit bilah sisi, sederhanakan desain, dan fokus pada konten. Tetapi kami juga melihat pola-pola muncul yang telah menjadi begitu umum sehingga kami mendengar seruan bahwa "semua situs web terlihat sama".

Tata letak kisi akan memungkinkan kami keluar dari tata letak yang kami kunjungi dan memberi kami alat yang kami butuhkan untuk membangun tata letak generasi selanjutnya. Kami akhirnya dapat membangun di sekitar konten alih-alih memaksanya ke dalam pola desain umum yang dapat ditemukan di setiap situs web responsif lainnya.

Sebuah Kata Peringatan

Penting untuk dicatat bahwa tidak semua browser mendukung fitur flexbox dan grid. Kami harus mempertimbangkan siapa audiens kami untuk setiap proyek dan menentukan apakah mayoritas pengguna akan mendapat manfaat dari fitur-fitur yang lebih canggih ini, sambil memberikan dukungan yang masuk akal untuk browser yang tidak mendukung. Sangat dapat diterima untuk memberi pengguna UI versi lama browser yang disederhanakan, dan meningkatkannya untuk pengguna di browser yang lebih baru.

Masih Ada Lagi. Lebih banyak lagi.

Kami hanya menggaruk permukaan apa yang bisa dilakukan oleh flexbox dan kisi. Untungnya, ada banyak dokumentasi hebat yang tersedia yang menyentuh kemampuan alat tata letak baru ini. Inilah beberapa favorit saya:

Flexbox

Kisi

Siapa pun yang telah membangun untuk Web dengan susah payah menyadari berbagai keterbatasan ketika datang ke tata letak di CSS. Sering kali, ini diperlukan kompromi desain sehingga berfungsi seperti yang diharapkan dalam pengembangan, atau lebih buruk, mengandalkan Javascript untuk menerapkan perilaku yang kami butuhkan.

Kedatangan flexbox dan tata letak kotak menandakan era baru tata letak di Web. Kita harus mengadopsi pola pikir baru ketika datang ke tata letak agar tidak dibatasi oleh kebiasaan, kelemahan dan peretasan di masa lalu. Mari merangkul alat-alat baru ini dan memperbarui eksplorasi kami untuk apa yang mungkin dengan tata letak di Web.