Cara menggunakan Flexbox untuk membuat tata letak desain kartu CSS modern

Berkat Flexbox, mode tata letak baru di CSS3, kita bisa mendapatkan semua kartu kita secara berurutan—secara harfiah. Desain kartu semakin populer selama beberapa tahun terakhir; seperti yang mungkin Anda perhatikan, situs media sosial benar-benar menggunakan kartu. Pinterest dan Dribbble menggunakan tata letak kartu untuk menampilkan informasi dan visual. Dan jika Anda menyukai Desain Material, kartu Google dijelaskan dengan baik di pustaka polanya.

Saya pribadi menyukai tata letak kartu karena keterbacaannya dan seberapa dapat digulirnya. Mereka menyajikan "ledakan" informasi yang sempurna dengan cara yang mudah dijelajahi, digulir, dan dipindai sekaligus.

Cara membuat tata letak kartu

Jika Anda pernah mencoba baris konten dengan tinggi genap, Anda tahu bahwa membangunnya tidak selalu mudah. Anda mungkin harus melakukan sedikit mengutak-atik untuk membuatnya bekerja di masa lalu. Berkat Flexbox, hari-hari itu sudah berlalu. Tergantung pada tingkat dukungan browser yang perlu Anda berikan, Anda mungkin harus menyertakan beberapa fallback, tetapi dukungan browser untuk fitur ini cukup andal akhir-akhir ini. Agar aman, pastikan untuk memeriksa Flexbox di Can I use yang terpercaya. Dan ingat, Anda tidak boleh membuat perubahan di situs langsung Anda. Cobalah bereksperimen dengan Lokal sebagai gantinya, aplikasi pengembangan WordPress lokal gratis.

Ide dasar dari Flexbox adalah Anda dapat mengatur properti tampilan wadah menjadi flex , yang akan "melenturkan" ukuran semua wadah di dalamnya. Kolom dengan tinggi yang sama dan opsi penskalaan dan kontrak akan menyederhanakan bagaimana tata letak lanjutan dapat dibuat. Memulai dengan kartu seperti lembar contekan Flexbox, tetapi setelah Anda menguasai dasar-dasarnya, Anda dapat membuat tata letak yang lebih kompleks.

Flexbox dan keserbagunaan

Kartu serbaguna, menarik secara visual, dan mudah berinteraksi dengan perangkat besar dan kecil, yang sempurna untuk desain responsif. Setiap kartu bertindak sebagai wadah konten yang mudah ditingkatkan atau diturunkan. Saat ukuran layar semakin kecil, jumlah kartu dalam baris biasanya berkurang dan mulai menumpuk secara vertikal. Ada fleksibilitas tambahan karena dapat berupa ketinggian tetap atau variabel.

Cara membuat tata letak

Kami akan membuat tata letak kartu Flexbox yang memiliki deretan empat wadah horizontal di layar yang lebih besar, dua di sedang, dan satu kolom untuk perangkat kecil.

Di bawah ini adalah cuplikan kode untuk membuat tata letak dasar untuk menampilkan empat kartu. Saya tidak memasukkan konten kartu bagian dalam (karena terlalu panjang dalam contoh kode), jadi pastikan untuk memasukkan beberapa konten starter di sana (dan jumlah konten bervariasi di antara keempat kartu). Juga, ada satu baris dari empat kartu yang ditampilkan di sini untuk memulai, tetapi lebih banyak dapat ditambahkan jika Anda ingin melihat perilaku dengan beberapa baris konten. Semua kode dapat ditemukan di Codepen.

Untuk menampilkan desain tata letak kita dalam pola kisi, kita harus mulai dari luar dan masuk ke dalam. Penting untuk memastikan Anda merujuk wadah yang benar, jika tidak semuanya akan menjadi sedikit berantakan.

Bagian dengan kelas .cards adalah yang akan kita targetkan terlebih dahulu. Properti tampilan wadah adalah apa yang perlu kita ubah menjadi flex .

Inilah HTML yang ingin Anda mulai:

<div class="centered">

            <section class="cards">
                
                <article class="card">
                   <p>content for card one</p>
                </article><!-- /card-one -->

 	<article class="card">
                   <p>content for card two</p>
            </article><!-- /card-two -->

<article class="card">
                  <p>content for card three</p>
            </article><!-- /card-three -->

<article class="card">
                   <p>content for card four</p>
            </article><!-- /card-four -->

	</section>
</div>

Berikut adalah CSS untuk memulai:

.cards {
   display: flex;
   justify-content: space-between;
}

Properti fleksibel

Sebelum masuk terlalu dalam, ada baiknya mengetahui dasar-dasar properti flex. Properti flex menentukan panjang item, relatif terhadap item fleksibel lainnya di dalam wadah yang sama. Properti flex adalah singkatan dari flex-grow , flex-shrink , dan properti flex-basis . Nilai default adalah 0 1 auto; . Menurut pendapat saya, cara terbaik untuk memahami Flexbox sepenuhnya adalah dengan bermain-main dengan nilai-nilai yang berbeda dan melihat apa yang terjadi.

Properti flex-grow dari item flex menentukan jumlah ruang di dalam wadah fleksibel yang harus digunakan item.

Properti flex-shrink menentukan bagaimana item akan menyusut relatif terhadap item fleksibel lainnya di dalam wadah yang sama.

Properti flex-basis menentukan ukuran utama awal dari item fleksibel. Properti ini menentukan ukuran kotak konten, kecuali ditentukan lain menggunakan ukuran kotak. Otomatis adalah default ketika lebar ditentukan oleh konten, yang mirip dengan width: auto; . Ini akan mengambil ruang yang ditentukan oleh kontennya sendiri. Mungkin ada nilai tertentu yang tetap benar seperti yang terlihat pada basis flex-basis: 15em; . Jika nilainya 0, semuanya cukup diatur karena item tidak akan mengembang untuk mengisi ruang kosong.

Kami mulai dengan display: flex; dan justify-content: space-between; dan pada titik ini, hal-hal sedikit tidak terduga. Flexbox sedang digunakan, meskipun tidak terlalu jelas saat ini. Dengan deklarasi ini, masing-masing item fleksibel telah ditempatkan di samping satu sama lain dalam baris horizontal.

Lihat ini di Codepen.

Anda mungkin bertanya-tanya mengapa masing-masing item fleksibel ini memiliki lebar yang berbeda. Flexbox mencoba mencari tahu berapa lebar default terkecil untuk masing-masing item ini. Dan karena berbagai panjang kata dan elemen desain lainnya, Anda berakhir dengan kotak berukuran berbeda ini. Untuk mencapai tampilan yang konsisten, kita perlu melakukan sedikit lebih banyak pekerjaan. Mengatur bungkus dan menentukan lebar yang diinginkan akan membantu membuatnya menjadi kartu yang seragam.

.cards {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}

Secara default, semua item fleksibel akan mencoba masuk ke dalam satu baris. Menambahkan flex-wrap: wrap; membuat item terbungkus di bawah satu sama lain karena defaultnya adalah lebar penuh.

Lihat ini di Codepen.

Lebar penuh sangat bagus untuk perangkat kecil, jadi ingatlah ini saat kami merencanakan layar yang lebih besar sebelum menangani berbagai breakpoint. Saat kami mengubah lebarnya, kartu mulai terlihat lebih rata.

Kita perlu menambahkan kelas .card sekarang untuk menata kartu individual kita. Ini bisa langsung di bawah gaya .cards .

.cards {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}

.card {
	flex: 0 1 24%;
}

Ingat dari sebelumnya, properti flex adalah singkatan: flex-grow adalah 0, flex-shrink adalah 1, dan width adalah 24%. Dengan menambahkan lebar yang ditentukan, ini memberi kita empat baris dengan beberapa ruang di antaranya.

Lihat ini di Codepen.

Kami menetapkan properti justify-content untuk tujuan spasi. Item pertama ditampilkan dengan hard left, item kedua dan ketiga ditampilkan di tengah, dan item keempat ditampilkan hard right. Karena lebar kartu adalah 24%, ada beberapa ruang yang tersisa karena empat kolom kami di 24% tidak berjumlah 100%. Kami memiliki 4% tersisa tepatnya. 4% ini ditempatkan sama di antara masing-masing item. Jadi kami memiliki sekitar 1,33% ruang di antara kartu.

Lihat ini di Codepen.

Kita bisa lebih tepat juga dengan menggunakan calc . Mengubah nilai flex-basis untuk menggunakan calc akan terlihat seperti ini:

.card {
	flex: 0 1 calc(25% - 1em);
}

Hal yang keren dengan ini adalah bahwa browser akan mengambil 25% dari ruang dan menghapus 1em dari itu, yang membuat kartu sedikit lebih kecil.

Ini cara yang apik untuk menyesuaikan ruang yang tersedia. 1em didistribusikan secara merata di antara item dan kami berakhir dengan tata letak yang sempurna.

Sampai sekarang, kami memang belum banyak bicara soal tinggi badan. Saya telah menambahkan deretan kartu lain untuk menunjukkan cara kerja ketinggian. Itu tergantung pada kartu mana yang memiliki konten paling banyak – tinggi kartu lainnya akan mengikuti. Oleh karena itu, setiap baris konten akan memiliki ketinggian yang sama.

Ini adalah tampilan yang sangat "diperkecil", tetapi Anda akan melihat bahwa baris pertama cukup tinggi karena kartu kedua memiliki lebih banyak teks daripada yang lain di baris itu. Baris kedua memiliki lebih sedikit teks, jadi secara keseluruhan lebih pendek.

Kartu untuk perangkat yang lebih kecil

Saat ini kami memiliki empat kolom di semua layar, yang sebenarnya bukan praktik terbaik. Jika Anda membuat jendela browser Anda lebih kecil, Anda akan melihat bahwa keempat kartu tersebut semakin terjepit di layar yang lebih kecil, yang tidak ideal untuk keterbacaan. Untungnya dengan pertanyaan media, segalanya akan mulai terlihat jauh lebih baik.

Untuk mulai memecahkan masalah, titik henti sementara yang ditentukan akan memastikan bahwa konten ditampilkan dengan benar di semua jenis layar yang berbeda.

Berikut adalah breakpoint yang akan digunakan (jangan ragu untuk menggunakan milik Anda juga, konsepnya masih berlaku):

@media screen and (min-width: 40em) {
    .cards {
   }

    .card {
    }
}

@media screen and (min-width: 60em) {
    .cards {
   }
    
    .card {
     }
}


@media screen and (min-width: 52em) {
    .centered {
       
    }
}

Sudah menjadi pemikiran besar sampai sekarang. Mari masuk ke pola pikir mobile-first dan mulai dengan breakpoint min-width: 40em .

@media screen and (min-width: 40em) {
    .cards {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .card {
        flex: 0 1 calc(25% - 1em);
    }
}

Dengan perubahan ini, kartu akan ditampilkan dengan lebar layar penuh dan ditumpuk di bawah satu sama lain pada layar yang lebih kecil dari lebar sekitar 640 piksel. Jika Anda memperluas jendela browser ke apa pun di atas itu, kolom empat kembali. Ini masuk akal karena ada min-width minimum 40em dan di sinilah kami membuat deretan empat kartu.

Apa yang hilang di sini adalah jalan tengah. Untuk rentang menengah, memiliki dua kartu berturut-turut lebih mudah dibaca, daripada empat kartu squished. Sebelum kita mengetahui deretan dua kartu, kueri media lain perlu ditambahkan untuk mengakomodasi layar terbesar, yang akan memiliki deretan empat kartu.

@media screen and (min-width: 60em) {
    .card {
        flex: 0 1 calc(25% - 1em);
    }
}

Kueri media baru dengan min-width minimum 60em adalah tempat keempat kartu akan dideklarasikan. min-width minimum 40em adalah tempat deretan dua kartu akan dideklarasikan. Keajaiban terjadi dengan nilai flex calc 50% – 1em.

@media screen and (min-width: 40em) {
    .cards {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .card {
        flex: 0 1 calc(50% - 1em);
    }
}

Dengan perubahan sederhana itu, semuanya sekarang berfungsi! Kecilkan dan perluas jendela browser untuk memastikan semuanya terlihat benar.

Lihat ini di Codepen.

Jika deretan kartu Anda terlihat benar, maka Anda siap melakukannya! Jika Anda mencoba tutorial ini dan memiliki baris terakhir yang tidak rata, teruslah membaca.

Konten dinamis dan baris terakhir dari jarak kartu

Tergantung pada jumlah kartu Anda, Anda mungkin atau mungkin tidak memiliki baris terakhir yang konyol. Jika ada baris terakhir yang penuh atau hanya satu kartu tambahan, tidak akan ada masalah. Terkadang konten Anda sudah direncanakan sebelumnya, tetapi jika kontennya dinamis, baris kartu terakhir mungkin tidak berfungsi seperti yang Anda inginkan. Jika ada lebih dari satu kartu tambahan dan konten justifikasi disetel, itu akan membuat jarak di antara kartu-kartu tersebut rata, dan mungkin tidak sejajar dengan baris di atas.

Untuk mendapatkan tampilan ini, diperlukan cara berpikir yang berbeda. Saya berpendapat ini tidak seefisien, tetapi relatif sederhana.

Penataan gaya .cards dan .card dilakukan di luar kueri media:

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

.card {
    flex: 1 0 500px;
    box-sizing: border-box;
    margin: 1rem .25em;
}

Kueri media adalah tempat jumlah kartu ditentukan:

@media screen and (min-width: 40em) {
    .card {
       max-width: calc(50% -  1em);
    }
}

@media screen and (min-width: 60em) {
    .card {
        max-width: calc(25% - 1em);
    }
}

Lihatlah Codepen untuk melihat solusi yang dimodifikasi.

Semoga ini memberi Anda gambaran dasar tentang konsep Flexbox yang akan membantu Anda memulai. Flexbox memiliki dukungan browser yang cukup baik, dan tata letak kartu akan terus digunakan dalam desain situs web. Dan ingat, tata letak kartu hanyalah permulaan bagaimana Anda dapat menggunakan Flexbox.

Berikutnya: Merancang situs WordPress lebih cepat

Dalam panduan ini, kami akan membahas tip tentang cara bekerja lebih cepat dan mempercepat alur kerja WordPress Anda. Dari penyiapan situs awal hingga menjalankannya, temukan bagaimana Anda dapat memangkas jam kerja dari pekerjaan sehari-hari Anda!

Unduh panduan gratis di sini!

Apa lagi yang telah Anda buat menggunakan Flexbox? Bagikan proyek Anda di komentar!