Cara Membangun Tata Letak Cerdas khusus CSS dengan Flexbox

Kotak fleksibel, atau singkatnya Flexbox, adalah sekumpulan properti di CSS yang diperkenalkan pada tahun 2009 untuk menyediakan sistem tata letak baru yang luar biasa. Modul Flexbox diidentifikasi sebagai bagian dari CSS versi ketiga (CSS3).

Anda mungkin sudah menggunakan banyak properti baru di CSS3, seperti box-shadow , border-radius , background gradients , dan sebagainya. Namun, Flexbox belum melihat adopsi luas yang layak. Ini mungkin karena semua perubahan besar yang dialaminya selama bertahun-tahun, atau karena hanya didukung sebagian di Internet Explorer 10, atau hanya karena Flexbox adalah keseluruhan ekosistem sementara paradigma sebelumnya sebagian besar didasarkan pada satu, siap pakai. pergi properti.

Ini sangat kuat dan menawarkan berbagai pilihan untuk mencapai tata letak yang, sebelumnya, hanya bisa diimpikan.

Artikel ini akan memandu Anda melalui dasar-dasar Flexbox dan bagaimana Anda dapat menggunakannya untuk mencapai beberapa tata letak yang sangat keren yang jika tidak memerlukan peretasan CSS yang rumit atau bahkan JavaScript.

Mengapa Menggunakan Flexbox?

Secara default, elemen level blok HTML menumpuk, jadi jika Anda ingin menyelaraskannya dalam satu baris, Anda harus mengandalkan properti CSS seperti float , atau memanipulasi properti display dengan pengaturan table-ish atau inline-block.

Jika Anda memilih untuk menggunakan float (kiri atau kanan), Anda harus mengosongkan pembungkus di beberapa titik untuk mendorongnya hingga elemen float terakhir, jika tidak, pembungkusnya akan meluap setelahnya. Namun, dengan float, Anda dibatasi untuk mengatur elemen secara horizontal.

Atau, atau sebagai tambahan, Anda dapat memanipulasi properti display untuk mencoba mencapai tata letak yang Anda inginkan! Tapi ini sering kali terasa kaku, belum lagi membosankan, dan sering kali menghasilkan tata letak yang cukup rapuh yang belum tentu ditampilkan secara konsisten di seluruh browser. Pendekatan ini sangat tidak efektif jika Anda menargetkan beberapa perangkat dengan berbagai ukuran—yang hampir selalu terjadi saat ini.

Masuk ke Flexbox!

Dengan aturan sederhana yang diterapkan ke elemen induk, Anda dapat dengan mudah mengontrol perilaku tata letak semua turunannya.

Dengan Flexbox, Anda dapat:

• Membalikkan urutan elemen di dalam induk Flexbox.
• Bungkus elemen anak dalam kolom (jumlah kolom dapat bervariasi tergantung pada tinggi anak dan orang tua).
• Tentukan tingkat pertumbuhan atau penyusutan elemen saat ukuran viewport berubah.
• Kontrol apakah elemen dapat disusutkan atau tidak, terlepas dari jenis satuan lebar yang ditentukan (relatif atau absolut).
• Ubah urutan elemen dengan CSS (gabungkan ini dengan kueri media dan Anda akan menemukan kemungkinan tak terbatas dalam alur Anda).
• Hasilkan distribusi elemen yang kompleks agar berjarak sama dengan ruang sekitar atau hanya ruang di antaranya.
• Hasilkan elemen "pemberontak" yang mengalir secara berbeda (semua orang ke kiri tetapi satu ke kanan, atas/bawah... itu panggilan Anda).
• Dan, yang paling penting, hindari peretasan yang jelas untuk selamanya!

Saya mengerti Flexbox bisa jadi sulit pada awalnya. Saya pikir lebih mudah untuk mempelajari sepuluh properti CSS yang tidak terkait daripada lima dengan beberapa ketergantungan. Namun, dengan keterampilan CSS Anda saat ini, dan mungkin sedikit bantuan dari artikel ini, Anda akan meluncurkan diri Anda ke dunia CSS baru.

Dasar-dasar Flexbox

Menampilkan

display adalah salah satu properti paling dasar dalam CSS dan cukup penting dalam konteks Flexbox, karena digunakan untuk mendefinisikan pembungkus fleksibel.

Ada dua kemungkinan nilai pembungkus fleksibel: flex dan inline-flex .

Perbedaan antara keduanya adalah bahwa display: flex wrapper bertindak seperti elemen blok sementara display: inline-flex wrapper bertindak seperti inline-block. Juga, elemen inline-flex tumbuh jika tidak ada cukup ruang untuk menampung anak-anak. Tapi selain perbedaan itu, perilaku keduanya akan sama.

Coba contoh kode di bawah ini, kurangi lebar viewport saat inline-flex aktif dan… scroll.

Lihat properti Pena Flexbox @Toptal - Induk - `display` oleh DD (@Diegue) di CodePen.

 .wrapper { display: flex || inline-flex; }

Arah Fleksibel

Sekarang setelah Anda melihat sampel pertama, Anda dapat menyimpulkan bahwa perilaku default adalah membuat deretan elemen. Tapi ada lagi:

• baris (default): Mengatur elemen dari kiri ke kanan (tetapi jika RTL diatur, itu akan mundur).
• row-reverse: Membalik urutan elemen dalam disposisi baris
• kolom: Mengatur elemen dari atas ke bawah
• column-reverse: Membalik urutan elemen dalam disposisi kolom

Petunjuk: Nilai column dan column-reverse dapat digunakan untuk menukar sumbu, sehingga properti yang akan mempengaruhi sumbu horizontal akan mempengaruhi sumbu vertikal sebagai gantinya.

Lihat properti Pena Flexbox @Toptal - Induk - `flex-direction` oleh DD (@Diegue) di CodePen.

 .wrapper { flex-direction: row || row-reverse || column || column-reverse; }

Bungkus Fleksibel

Jika Anda memeriksa contoh kode pertama, Anda akan mengetahui bahwa elemen turunan tidak menumpuk secara default di dalam pembungkus fleksibel. Di sinilah flex-wrap berperan:

• nowrap (default): Mencegah item dalam wadah fleksibel agar tidak dibungkus
• bungkus: Membungkus item sesuai kebutuhan menjadi beberapa baris (atau kolom, tergantung pada flex-direction )
• wrap-reverse: Sama seperti wrap , tetapi jumlah baris (atau kolom) bertambah ke arah yang berlawanan saat item dibungkus

Lihat properti Pena Flexbox @Toptal - Induk - `flex-wrap` oleh DD (@Diegue) di CodePen.

 .wrapper { flex-wrap: nowrap || wrap || wrap-reverse; }

Aliran Fleksibel

Anda dapat menggabungkan properti flex-direction dan flex-wrap menjadi satu properti: flex-flow .

 .wrapper { flex-flow: {flex-direction} {flex-wrap}; }

Membenarkan Konten

Properti ini digunakan untuk mengontrol perataan horizontal elemen turunan:

• flex-start (default): Elemen disejajarkan ke kiri (mirip dengan elemen sebaris dengan text-align: left )
• flex-end: Elemen disejajarkan ke kanan (mirip dengan elemen sebaris dengan text-align: right )
• center: Elemen dipusatkan (mirip dengan elemen sebaris dengan text-align: center )
• space-around (tempat keajaiban dimulai): Setiap elemen akan dirender dengan jumlah ruang yang sama di sekitar setiap item. Perhatikan bahwa spasi antara dua elemen turunan berurutan akan menjadi dua kali lipat spasi antara elemen terluar dan sisi pembungkus.
• space-between: Sama seperti space-around , kecuali elemen akan dipisahkan oleh jarak yang sama dan tidak akan ada ruang di dekat salah satu tepi pembungkus.

Catatan: Ingat flex-direction , ketika disetel ke column atau column-reverse , menukar sumbu. Jika salah satunya diatur, justify-content akan memengaruhi perataan vertikal, bukan horizontal.

Lihat Pen Flexbox @Toptal - Induk - properti `justify-content` oleh DD (@Diegue) di CodePen.

Sejajarkan Item

Properti ini mirip dengan justify-content tetapi konteks efeknya adalah baris, bukan pembungkus itu sendiri:

• flex-start: Elemen disejajarkan secara vertikal ke bagian atas pembungkus.
• flex-end: Elemen disejajarkan secara vertikal ke bagian bawah pembungkus.
• center: Elemen dipusatkan secara vertikal di dalam pembungkus (akhirnya, praktik yang aman untuk mencapai ini).
• stretch (default): Memaksa elemen untuk menempati tinggi penuh (bila diterapkan ke baris) dan lebar penuh (bila diterapkan ke kolom) pembungkus.
• baseline: Menyejajarkan elemen secara vertikal dengan baseline sebenarnya.

Lihat Pen Flexbox @Toptal - Induk - properti `align-items` oleh DD (@Diegue) di CodePen.

Sejajarkan Konten

Properti ini mirip dengan justify-content dan align-items tetapi berfungsi dalam sumbu vertikal dan konteksnya adalah seluruh pembungkus (bukan baris seperti contoh sebelumnya). Untuk melihat efeknya, Anda memerlukan lebih dari satu baris:

• flex-start: Baris disejajarkan secara vertikal ke atas (yaitu, ditumpuk dari atas pembungkus).
• flex-end: Baris disejajarkan secara vertikal ke bawah (yaitu, ditumpuk dari bagian bawah pembungkus).
• center: Baris dipusatkan di pembungkus secara vertikal.
• stretch (default): Secara umum, properti ini meregangkan elemen untuk memanfaatkan seluruh ketinggian vertikal pembungkus. Namun, jika Anda telah menetapkan beberapa ketinggian tertentu dari elemen, ketinggian itu akan dihormati dan ruang vertikal yang tersisa (di baris itu, di bawah elemen itu) akan kosong.
• space-around: Setiap baris akan dirender dengan jumlah ruang yang sama di sekelilingnya secara vertikal (yaitu, di bawah dan di atasnya). Perhatikan bahwa jarak antara dua baris akan menjadi dua kali lipat jarak antara baris atas dan bawah dan tepi pembungkus.
• space-between: Sama seperti space-around , kecuali elemen akan dipisahkan dengan jarak yang sama dan tidak akan ada ruang di tepi atas dan bawah pembungkus.

Lihat Pen Flexbox @Toptal - Induk - properti `align-content` oleh DD (@Diegue) di CodePen.

Tumbuh Fleksibel

Properti ini menetapkan proporsi relatif dari ruang yang tersedia yang harus digunakan elemen. Nilainya harus bilangan bulat, di mana 0 adalah default.

Katakanlah Anda memiliki dua elemen berbeda ke dalam pembungkus fleksibel yang sama. Jika keduanya memiliki nilai flex-grow 1, keduanya akan tumbuh sama untuk berbagi ruang yang tersedia. Tetapi jika yang satu memiliki nilai flex-grow 1 dan yang lainnya bernilai flex-grow 2, seperti yang ditunjukkan pada contoh di bawah ini, yang satu ini dengan nilai flex-grow 2 akan tumbuh untuk mengambil ruang dua kali lebih banyak dari yang pertama.

 .wrapper .elements { flex-grow: 1; /* Default 0 */ } .wrapper .elements:first-child { flex-grow: 2; } 

Lihat Pen Flexbox @Toptal - Anak - properti `flex-grow` oleh DD (@Diegue) di CodePen.

Kecilkan Fleksibel

Mirip dengan flex-grow , properti ini menetapkan apakah elemen "dapat menyusut" atau tidak dengan nilai integer. Mirip dengan flex-grow , flex-shrink menentukan faktor shrink dari item flex.

Lihat Pen Flexbox @Toptal - Anak - properti `flex-shrink` oleh DD (@Diegue) di CodePen.

 .wrapper .element { flex-shrink: 1; /* Default 0 */ }

Dasar Fleksibel

Properti ini digunakan untuk menentukan ukuran awal elemen sebelum ruang yang tersedia didistribusikan dan elemen disesuaikan.

Petunjuk: flex-basis tidak mendukung calc() dan box-sizing: border-box di setiap browser, jadi saya sarankan menggunakan width jika Anda perlu menggunakan salah satunya (perhatikan bahwa Anda juga perlu mengatur flex-basis: auto; ).

Lihat Pen Flexbox @Toptal - Anak - properti `flex-basis` oleh DD (@Diegue) di CodePen.

 .wrapper .element { flex-basis: size || auto; /* Default auto */ }

Melenturkan

Anda dapat menggabungkan properti flex-grow , flex-shrink , dan flex-basis menjadi satu properti: flex sebagai berikut:

 .wrapper { flex: {flex-grow} {flex-shrink} {flex-basis}; }

Petunjuk: Jika Anda berencana untuk menggunakan flex , pastikan untuk menentukan setiap nilai (bahkan jika Anda ingin menggunakan nilai default) karena beberapa browser mungkin tidak mengenalinya (bug umum terkait dengan tidak menetapkan nilai flex-grow ).

Sejajarkan Diri

Properti ini mirip dengan align-items tetapi efeknya diterapkan secara individual ke setiap elemen. Nilai yang mungkin adalah:

• flex-start: Menyejajarkan elemen secara vertikal ke bagian atas pembungkus.
• flex-end: Menyejajarkan elemen secara vertikal ke bagian bawah pembungkus.
• center: Secara vertikal memusatkan elemen di dalam pembungkus (akhirnya cara sederhana untuk mencapai ini!).
• stretch (default): Meregangkan elemen untuk menempati tinggi penuh pembungkus (bila diterapkan ke baris) atau lebar penuh pembungkus (bila diterapkan ke kolom).
• baseline: Menyejajarkan elemen sesuai dengan baseline sebenarnya.

Lihat Pen Flexbox @Toptal - Anak - properti `align-self` oleh DD (@Diegue) di CodePen.

Memesan

Salah satu hal terbaik yang disertakan dalam Flexbox adalah kemampuan untuk menyusun ulang elemen (menggunakan properti order ) tanpa perlu memodifikasi DOM atau menggunakan JavaScript. Cara kerja properti order sangat sederhana. Dengan cara yang sama seperti z-index mengontrol urutan item yang dirender, order mengontrol urutan elemen yang diposisikan di dalam wrapper; yaitu, elemen dengan nilai order yang lebih rendah (yang bahkan bisa negatif, omong-omong) diposisikan sebelum elemen dengan nilai order yang lebih tinggi.

Lihat Pen Flexbox @Toptal - Anak - properti `pesan` oleh DD (@Diegue) di CodePen.

 .wrapper .elements { order: 1; /* this one will be positioned second */ } .wrapper .elements:last-child { order: -1; /* this one will be positioned first */ }

Menarik Semuanya Bersama: Contoh Penggunaan Flexbox

Dalam hal mendesain tata letak, Flexbox menghadirkan banyak kemungkinan. Di bawah ini, Anda dapat menemukan beberapa contoh penggunaan properti Flexbox.

Komponen Penjajaran Vertikal

Dengan Flexbox, Anda dapat menyelaraskan apa saja secara vertikal, termasuk beberapa elemen sekaligus. Tanpa Flexbox, Anda perlu menggunakan teknik pemosisian atau table-ish yang mengharuskan kami membuat satu turunan untuk memuat banyak elemen. Tetapi dengan Flexbox, Anda dapat meninggalkan teknik yang membosankan dan rapuh ini, dan cukup menentukan beberapa properti di pembungkus dan hanya itu, terlepas dari berapa kali konten di dalam wadah berubah atau jenis perubahannya!

 .wrapper { display: flex; /* always present for Flexbox practices */ flex-direction: column; /* elements stack */ justify-content: center; /* now that flex-direction is a column, the axis are swapped so this centers the content vertically */ min-height: 100vh /* make sure wrapper is taller enough */ } 

Lihat Pen Flexbox @Toptal - Penggunaan nyata yang dapat kami berikan - Perataan vertikal oleh DD (@Diegue) pada CodePen.

Setengah/setengah Tata Letak

Tata letak "setengah/setengah" adalah tata letak tinggi penuh dengan dua kolom, masing-masing dengan kontennya dipusatkan secara vertikal. Biasanya diterapkan "paro atas" (yaitu, sebelum pengguna menggulir ke bawah setelah halaman dimuat).

Dengan menggunakan teknik yang lebih tradisional, Anda dapat membuat tata letak ini dengan elemen mengambang (masing-masing dengan lebar 50%), membersihkan float ke dalam pembungkus (“clearfix” :before dan :after , overflow: hidden , atau <div> yang aneh dengan clear: both; pada akhirnya). Namun banyak pekerjaan dan hasilnya tidak stabil seperti yang disediakan Flexbox.

Dalam cuplikan kode berikut, Anda akan melihat betapa mudahnya mengatur tata letak dan juga bagaimana anak-anak menjadi pembungkus Flexbox karena semuanya juga disejajarkan secara vertikal.

Pembungkus luar:

 .wrapper { display: flex; flex-direction: column; /* only for mobile */ }

Pembungkus dalam:

 .inner-wrapper { flex-grow: 1; /* Allow the element to grow if there is available space */ flex-shrink: 1; /* Elements shrink at the same rate */ flex-basis: 100%; /* Elements will cover the same amount, if is possible the 100% of the width */ } 

Lihat Pen Flexbox @Toptal - Penggunaan nyata yang dapat kami berikan - Bagian setengah-berdarah oleh DD (@Diegue) di CodePen.

Tombol Navbar lebar penuh

Navbar lebar penuh mendistribusikan ruang secara merata di baris item navbar yang sama terlepas dari jumlah elemen.

Dalam contoh di bawah, ada juga beberapa tombol ikonik tanpa perilaku ini, yang menunjukkan bahwa Anda dapat menggabungkan keduanya dengan cara apa pun yang Anda inginkan. Tanpa Flexbox, mencapai tata letak semacam ini akan membutuhkan kode JavaScript untuk menghitung ruang yang tersedia dan kemudian mendistribusikannya secara terprogram tergantung pada tombol mana yang terbentang dan mana yang tidak.

Flexbox membuat ini lebih sederhana.

Properti pembungkus:

 .navbar { display: flex; }

Mencakup properti anak:

 .navbar-item { flex-grow: 1; /* They will grow */ }

Properti turunan non-spanning:

 .navbar-other { flex-grow: 0; // They won't grow } 

Lihat Pen Flexbox @Toptal - Penggunaan nyata yang dapat kami berikan - Tombol navbar full-bleed oleh DD (@Diegue) di CodePen.

mengaburkan

Berapa kali Anda harus menerapkan satu set kotak informasi dengan ikon dan teks dalam proyek yang berbeda?

Distribusi elemen ini sebagian besar berguna dalam pemasaran digital tetapi dapat memiliki beberapa kegunaan lain dalam pengembangan perangkat lunak. Dengan kekuatan Flexbox, Anda dapat mengatur semacam kisi dan juga menyelaraskan elemen terlepas dari berapa banyak jumlahnya.

Properti pembungkus:

 .wrapper { display: flex; flex-wrap: wrap; }

Properti anak:

 .blurb { flex-grow: 0; /* elements don't grow */ flex-shrink: 0; /* elements don't shrink in a flexible way */ flex-basis: auto; /* the width of the elements will be set by proportions in `width` due to flex-basis not support workaround */ width: calc(33.33% - 60px); /* calculate proportional width without space taken by padding (workaround for IE 11) */ }

Untuk area pandang tablet dan seluler, lebarnya bervariasi antara 50% dan 100%.

Lihat Pen Flexbox @Toptal - Penggunaan nyata yang dapat kami berikan - Diburamkan oleh DD (@Diegue) di CodePen.

Meningkatkan Kompatibilitas Lintas-browser

Sintaks untuk Flexbox telah berubah berkali-kali di berbagai versi browser. Ini bisa menjadi masalah saat menerapkan tata letak dengan Flexbox dan mencoba mendukung browser web lama, terutama versi Internet Explorer yang lebih lama.

Untungnya, banyak teknik dan solusi untuk membuat kode Anda berfungsi di berbagai browser web terluas terdaftar di Flexbugs, yang merupakan sumber yang bagus. Jika Anda mengikuti informasi di situs itu, Anda akan mendapatkan hasil yang lebih baik dan konsisten di berbagai browser web.

Tugas awalan sangat berguna dalam hal ini. Untuk mengotomatiskan awalan aturan CSS, Anda dapat memilih salah satu alat berikut:

Rubi:

• Rel Autoprefixer
• Perantara Autoprefixer

Node.js:

• Autoprefixer PostCSS
• Autoprefixer Grunt
• Gulp Autoprefixer

Mulai Membangun Tata Letak Cerdas

Flexbox adalah alat yang hebat untuk mempercepat, memoles, dan menskalakan pekerjaan kita. Batasnya hanya dalam imajinasi pengembang.

Jika Anda memerlukan bantuan visual untuk merencanakan tata letak berikutnya, Anda dapat mencoba taman bermain yang rapi ini:

Lihat Pen Flexbox @Toptal - taman bermain Flexbox oleh DD (@Diegue) di CodePen.

Buka di jendela baru.

Dengan meningkatnya adopsi browser web modern oleh sebagian besar pengguna, menggunakan Flexbox akan memungkinkan Anda membuat tata letak yang menakjubkan dengan mudah tanpa perlu mempelajari kode JavaScript yang berantakan atau membuat CSS yang kaku.