Panduan visual untuk CSS Flexbox

Apa itu CSS Flexbox?

Sesuai dokumen web MDN:

“CSS Flexible Box Layout adalah modul CSS yang mendefinisikan model kotak CSS yang dioptimalkan untuk desain antarmuka pengguna, dan tata letak item dalam satu dimensi. Dalam model tata letak fleksibel, turunan wadah fleksibel dapat diletakkan ke segala arah, dan dapat "melenturkan" ukurannya, baik bertambah untuk mengisi ruang yang tidak digunakan atau menyusut untuk menghindari meluapnya induk. Penjajaran horizontal dan vertikal anak-anak dapat dengan mudah dimanipulasi. "

Jadi untuk meringkas, ini adalah modul tata letak yang membuat segalanya lebih mudah untuk menyelaraskan dan mendistribusikan ruang di antara item dalam sebuah wadah.

Mari kita lihat sekilas beberapa contoh tentang apa yang dapat dilakukan hanya dengan minimal 1–2 baris kode menggunakan CSS flexbox:

Tata letak perataan horizontal:

Tata letak perataan vertikal:

Ini cukup keren mengingat hanya satu atau dua baris CSS yang diperlukan untuk memanipulasi tata letak di dalam setiap penampung.

Dasar

Properti Flexbox dapat dikategorikan menjadi 2 tipe utama:

  1. Properti penampung (flex-direction, flex-wrap, justify-content, align-items, align-content)
  2. Properti Item Fleksibel (order, flex, flex-grow, flex-shrink, align-self)

Tampilan: flex

Properti pertama tidak khusus untuk flexbox. Properti yang displayyang kita set ke nilai: flex. Ini diatur pada wadah yang berisi item yang ingin kita manipulasi.

Mari tambahkan beberapa visual untuk memahami cara kerjanya:

Jika awalnya kita memiliki wadah, dengan 3 kotak ( div) di dalamnya. Seperti inilah mereka akan terlihat:

Sekarang mari tambahkan flexke wadah:

Hanya satu baris CSS yang telah mengubah tata letak dari arah vertikal menjadi horizontal.

Terminologi Penting seputar Flexbox

Istilah-istilah ini akan digunakan di seluruh panduan ini.

  1. Flex Container: Ini mengacu pada wadah yang telah display: flex;disetel padanya.
  2. Item Fleksibel: Ini adalah anak-anak individu di dalam Kontainer Flex
  3. Sumbu utama : Secara default disetel dari kiri ke kanan.
  4. Sumbu silang : Secara default disetel dari atas ke bawah.

Segera setelah display: flexdiatur pada wadah, sumbu imajiner ini akan bekerja sama untuk menentukan bagaimana item fleksibel di dalam wadah fleksibel harus bergerak dan berperilaku. Kedua sumbu ini mengubah arah, setiap kali kita mengubah properti flexbox tertentu yang dibahas di bawah ini.

Arah fleksibel

Properti ini menentukan arah sumbu imajiner. Sumbu, pada gilirannya, menentukan bagaimana item dalam wadah fleksibel harus ditempatkan. Dibutuhkan 4 nilai berikut:

  1. rowadalah nilai default dari sumbu utama yang menunjuk dari kiri ke kanan. Sumbu melintang tetap dari atas ke bawah.
  2. row-reversemembalikkan arah baris dari kanan ke kiri. Sekali lagi, sumbu silang dibiarkan tidak terpengaruh.

3. columnmengubah sumbu utama dari sumbu horizontal ke sumbu vertikal. Artinya sumbu utama sekarang mengalir dari atas ke bawah sedangkan sumbu melintang sekarang mengalir dari kiri ke kanan.

4. column-reversemirip dengan nilai kolom dengan satu-satunya perbedaan adalah bahwa sumbu utama sekarang mengalir dari bawah ke atas.

Flex-wrap

Flex-container secara default tidak mengizinkan item untuk mengambil beberapa baris dalam satu baris. Sebaliknya, semua item akan dipadatkan agar muat menjadi satu baris, yaitu tidak memungkinkan untuk digabung menjadi beberapa baris.

  1. flex-wrap: no-wrap adalah defaultnya.

2 flex-wrap: wrap.. Dengan mengubah properti itu menjadi wrap, sekarang kita dapat memastikan bahwa setiap item-fleksibel akan mempertahankan ukurannya masing-masing. Jika tidak bisa muat pada satu baris, mereka akan membungkusnya menjadi baris atau kolom berikutnya tergantung pada arah-fleksibel.

Jika flex-direction disetel ke row-reverse, maka item akan berpindah ke baris berikutnya mulai dari kanan ke kiri.

3. wrap-reversedi sisi lain akan membungkus baris item flex berikutnya di atas yang pertama, masih dari kiri ke kanan.

Justifikasi-konten

Properti ini sangat sering digunakan. Tujuannya adalah untuk mendistribusikan ruang antara item-fleksibel dalam wadah-fleksibel di sepanjang sumbu utama . Nilai defaultnya disetel ke flex-start.

Ingat: Jika arah-fleksibel telah diatur ke kolom, maka sumbu utama sekarang akan mengalir dari atas ke bawah. Artinya, justify-content sekarang akan mendistribusikan item secara vertikal.

Sejajarkan item

Properti ini sepopuler justify-contentdan digunakan secara teratur dengan flexbox. Itu melakukan hal yang sama justify-contentdengan satu-satunya perbedaan yang bekerja sepanjang sumbu silang . Nilai defaultnya align-itemsadalah stretch.

Ingat: Jika arah-fleksibel telah diatur ke kolom, maka sumbu melintang sekarang akan mengalir dari kiri ke kanan. Artinya, align-item sekarang akan mendistribusikan item secara horizontal.

Sejajarkan-konten

Properti ini mirip dengan dan dapat dengan mudah dikacaukan align-items. Tujuan dari properti ini adalah untuk menentukan bagaimana ruang antar baris dalam wadah fleksibel harus didistribusikan sepanjang sumbu silang .

Sementara align-itemsmenargetkan ruang di antara item-item fleksibel, align-contentmenargetkan baris di antara item-item tersebut. Nilai defaultnya align-contentadalah stretch.

Properti Item Fleksibel

Saatnya beralih ke jenis properti flexbox kedua yang memungkinkan kita menargetkan item individual di dalam wadah fleksibel.

Sejajarkan diri

Properti ini memungkinkan Anda untuk menyelaraskan item fleksibel individu di sepanjang sumbu silang. Ini menggantikan set penyelarasan ke wadah melalui align-items.

Ini juga mengambil properti yang sama seperti align-items(lihat di atas).

Memesan

Properti ini memungkinkan kita untuk mengatur ulang posisi item-flex individu di dalam wadah-fleksibel mereka. Secara default, semua item memiliki nilai 0 yang ditetapkan padanya.

Dengan menetapkan nilai yang lebih rendah (-ve) atau lebih besar (+ ve) melalui ordermasing-masing item, item tertentu tersebut akan dipindahkan ke posisi yang sesuai dengan nilainya.

Urutan akan mengikuti konvensi yang paling logis, yaitu -ve, 0, + ve. Angka terendah akan pergi ke paling kiri dan angka terbesar ke paling kanan, dengan asumsi bahwa yang lainnya disetel sebagai default. Jika ada item yang belum diberi nilai baru, mereka tetap sebagai 0.

Catatan: Kotak, 1, 2, 5 dan 6 pada contoh di atas semuanya masih pada nilai default 0. Untuk memperjelas, enam kotak di atas memiliki nilai berikut: -1, 0, 0, 0, 0, 1 .

Jika Anda ingin meletakkan kotak di depan kotak nomor 4, maka Anda perlu menyetel kotak yang Anda targetkan pada urutan -2 atau lebih rendah.

Flex-basis, Flex-grow, dan Flex-Shrink

Sejauh ini, semua item flex memiliki ukuran yang sama. Sekarang mari kita lihat bagaimana kita dapat membuat item-flex tertentu mengambil lebih banyak ruang di dalam wadah-fleksibel dibandingkan dengan item lain di dalam wadah yang sama.

Berbasis fleksibel

Properti ini menetapkan ukuran ideal item flex sebelum ditempatkan ke dalam wadah flex. Ini bekerja mirip dengan lebar saat bekerja dengan baris. Ia bekerja seperti ketinggian saat bekerja dengan kolom. Jadi jika kita bekerja dengan kolom, dan item telah diberi tinggi dan basis fleksibel, basis fleksibel akan diprioritaskan karena ini adalah tinggi ideal yang akan diambil item fleksibel jika ada cukup ruang yang tersedia.

Bisa dikatakan, jika tidak ada cukup ruang, dan tidak ada tinggi atau lebar yang ditetapkan untuk item tersebut. Item akan mengambil max-height atau max-width yang tersedia di wadah.

Pertumbuhan fleksibel

Properti ini menentukan bagaimana flex-item bisa berkembang untuk mengisi ruang yang tidak digunakan dalam flex-container.

Jika kita menetapkan a flex-grow: 1ke semua kotak, mereka semua akan mengambil ruang yang tersisa secara merata yang juga merupakan nilai defaultnya. Nomornya bisa apa saja, asalkan semua nomornya sama.

Jika kita memberi flex-grow: 1satu item dan memberikan yang kedua a flex-grow: 2, maka item kedua akan mengambil dua kali lebih banyak ruang yang tidak terpakai dibandingkan dengan yang pertama.

Ini berlaku untuk baris dan kolom.

Flex-menyusut

Properti ini menentukan bagaimana flex-barang yang bisa mengecilkan setiap kali ada tidak cukup ruang di flex-kontainer.

Ini flex-shrink: 1adalah nilai default, yang berarti bahwa semua item akan menyusut dengan kecepatan yang sama secara default.

Catatan:flex-shrink: 0; berarti item khusus ini tidak boleh menyusut.

flex-shrink: 2; artinya item khusus ini akan menyusut lebih cepat daripada yang lain di flex-shrink: 1;

Melenturkan

Ini adalah versi singkatan untuk flex-grow, flex-shrink, dan flex-basis dalam urutan tertentu.

Jika Anda perlu menggunakan ketiga hal di atas, Anda dapat menggunakan sesuatu seperti ini:

flex: 0 2 200px; di mana 0 mengacu pada flex-grow, 2 mengacu pada flex-shrink dan 200px masing-masing mengacu pada basis flex.

Selamat!

Itu dia! Ini adalah bahan utama untuk menjadi master fleksibel. Dan seperti untuk setiap hal lain dalam hidup dan dalam kode, latihan membuat menjadi sempurna. Saya sangat merekomendasikan untuk mempraktikkan panduan ini untuk mendapatkan pemahaman praktis. Salah satu contohnya adalah memulai dengan sesuatu yang kecil seperti bilah navigasi sederhana.

Anda juga dapat memeriksa tautan ke koleksi Codepen saya di flex-box yang saya gunakan untuk membuat kotak-kotak fleksibel tersebut pada gambar di atas dan men-tweaknya untuk melihat bagaimana mereka berubah.

Terima kasih telah membaca panduan ini di flexbox. Saya berharap ini bermanfaat dan informatif. Jika Anda memiliki pertanyaan atau ingin berbagi pendapat tentang topik ini, silakan hubungi bagian komentar atau email di [email protected]

Jika Anda merasa bacaan ini berharga, harap tunjukkan artikel ini sedikit cinta, dengan meninggalkan beberapa tepukan, sehingga pengembang lain dapat menemukannya juga.

ZeeshaanMaudar - Sekilas

Kode untuk kesenangan Kode untuk perubahan Kode untuk kebaikan sosial - ZeeshaanMaudar github.com