Merancang dan mengembangkan tata letak yang indah yang merespons ukuran viewport adalah sebagian seni, sebagian ilmu pengetahuan. Cara terbaik untuk melakukannya adalah dengan menggunakan Flexbox, yang merupakan model tata letak yang diperkenalkan dalam CSS yang memudahkan Anda untuk menyelaraskan dan mendistribusikan ruang di antara elemen-elemen di dalam sebuah wadah. Flexbox sangat bagus untuk menangani tata letak satu dimensi, apakah itu baris atau kolom. Ini akan menjadi panduan yang sepenuhnya nyaman dengan Flexbox.
Apa itu Flexbox?
Flexbox adalah model tata letak CSS yang merupakan singkatan dari kotak fleksibel. Flexbox adalah model tata letak satu dimensi yang melayani desain yang dapat diubah dan adaptif; elemen memiliki perubahan ukuran agar sesuai dengan wadahnya, tidak seperti model tata letak blok atau sebaris. Model ini beroperasi dalam satu dimensi pada satu waktu, baik secara horizontal (baris) atau vertikal (kolom).
Sumber: id.linkedin.com
Kontainer Fleksibel dan Item Fleksibel
Sebelum Anda dapat menggunakan flexbox, Anda memerlukan flex container. Dengan menunjuk elemen apa pun dengan tampilan flex (atau inline-flex), Anda dapat mengubahnya menjadi flex container. Sekarang, semua anak langsung dari kontainer ini menjadi item flex dengan perilaku flex yang diwarisi dari induknya.
.container {
display: flex;
}
Properti penting untuk kotak flex
1. arah-lentur
Kita sekarang menentukan sumbu utama tata letak yang menggambarkan bagaimana item akan dirender oleh kontainer.
- row (default): Item diposisikan secara horizontal
- Column: Item ditempatkan satu di bawah yang lain
- baris-membalikkan celorune-membalikkan: Membalikkan item
2. rata kanan-konten
Ini mengontrol perataan item Anda pada sumbu utama:
- flex-start (default): Item dipadatkan ke arah awal.
- flex-end: Item telah dipadatkan ke arah mammoth flex-end.
- center: Item berada di tengah.
- space-between: Ruang yang sama di antara item
- space-around: Ruang di sekitar item, didistribusikan secara merata.
3. menyelaraskan-item
Perataan Sumbu Silang Cara Meratakan Item di Sepanjang Sumbu Silang
- peregangan (default): Item direntangkan agar sesuai dengan wadah.
- mulai-lentur (default): Item dikemas ke arah awal sumbu arah luwes.
- flex-end: diratakan di bagian akhir.
- center: Item berada di tengah.
- baseline: Meratakan item di sepanjang garis dasar teksnya
4. flex-wrap
Menentukan apakah item harus dibungkus menjadi beberapa baris
- nowrap (default): Item tetap berada pada satu baris.
- wrap Item: mulai dibungkus ke dalam baris yang berbeda.
- wrap-balik: Membungkus elemen dalam urutan terbalik
Properti Utama untuk Item Flex
1. flex
Mengacu pada flex-grow, flex-shrink, dan flex-base dalam bentuk singkatan Ini mengontrol ukuran elemen saat tumbuh atau menyusut atau keduanya, serta ukuran dasarnya terhadap elemen lain.
2. menyelaraskan-diri
Item individual dapat memiliki nilai sendiri untuk align-item.
3. order
Menunjukkan bagaimana item di dalam kontainer ditampilkan. Item dengan nilai yang lebih rendah akan ditampilkan terlebih dahulu
Cara Menggunakannya di Dunia Nyata menggunakan Flexbox
1. Menu Navigasi
Sangat mudah untuk menyelaraskan item menu horizontal karena Flex-box menyediakan fungsionalitas untuk ruang yang terdistribusi secara merata. Sebagai contoh:
.nav {
display: flex;
justify-content: space-between;
}
2. Tata Letak Responsif
Flexbox memudahkan untuk mendesain tata letak yang efektif pada ukuran layar yang berbeda. Flex-wrap juga dapat digunakan untuk kueri media untuk membuat komponen responsif yang bersih.
3. Elemen Pemusatan
Contoh penggunaan flex yang bagus adalah memusatkan elemen secara horizontal dan vertikal:
.container {
display: flex;
justify-content: center;
align-items: center;
}
Manfaat Flexbox
- Mempermudah Penyelarasan: Mengatasi skenario perataan yang kompleks dengan mudah.
- Penanganan Tata Letak Responsif: Item yang berbeda dapat secara otomatis mengubah ukuran dan mengatur ulang tergantung pada ukuran layar.
- Dukungan Browser: Browser memiliki dukungan yang tinggi untuk Flexbox saat ini, namun versi yang lebih lama mungkin memerlukan implementasi sebelumnya.
Tips for Mastering Flexbox
- Mengenal sumbu-sumbu: Gagasan tentang sumbu utama dan silang karena keduanya mengubah cara kerja justify-content dan align-item.
- Bermain dengan Properti: Gunakan artikel ini untuk mempraktikkan berbagai properti flexbox dan melihat cara kerjanya.
- Flexbox dipasangkan dengan CSS Grid: Ketika berurusan dengan tata letak dua dimensi yang rumit, flex dapat digunakan bersama dengan CSS Grid.
Flexbox adalah landasan desain web modern, menawarkan cara intuitif kepada para pengembang untuk membuat tata letak yang lancar dan mudah beradaptasi. Dengan menguasai Flexbox, Anda akan mendapatkan keterampilan untuk membuat desain yang elegan dan responsif yang memenuhi tuntutan web masa kini. Selami alat serbaguna ini dan ubah pendekatan Anda terhadap desain tata letak!
Kembali ke>> CSS Grid vs Flexbox: Memilih Sistem Tata Letak yang Tepat