Pelajari CSS Flexbox dalam 5 menit - Tutorial untuk pemula

Pengenalan singkat untuk modul tata letak populer

Dalam posting ini, Anda akan mempelajari dasar-dasar CSS Flexbox, yang telah menjadi keterampilan yang harus dimiliki oleh pengembang dan desainer web dalam beberapa tahun terakhir.

Kami akan menggunakan navbar sebagai contoh, karena ini adalah kasus penggunaan yang sangat umum untuk Flexbox. Ini akan memperkenalkan Anda pada properti modul yang paling sering digunakan sambil mengabaikan properti yang tidak terlalu penting.

Saya juga membuat kursus 12 bagian gratis di Flexbox. Lihat di sini jika Anda tertarik!

Sekarang mari kita mulai!

Tata letak Flexbox pertama Anda

Dua komponen utama tata letak Flexbox adalah wadah dan item .

Berikut HTML untuk contoh kita, yang berisi wadah dengan tiga item:

 Home Search Logout 

Sebelum kita mengubahnya menjadi tata letak Flexbox, elemen akan ditumpuk satu sama lain seperti ini:

Saya telah menambahkan sedikit gaya, tetapi itu tidak ada hubungannya dengan Flexbox.

Saya telah menambahkan sedikit gaya, tetapi itu tidak ada hubungannya dengan Flexbox.

Untuk mengubahnya menjadi tata letak Flexbox, kami hanya akan memberikan wadah properti CSS berikut:

.container { display: flex; } 

Ini secara otomatis akan memposisikan item dengan baik di sepanjang sumbu horizontal.

Jika Anda ingin melihat kode sebenarnya, Anda dapat menuju ke taman bermain Scrimba ini.

Sekarang mari kita mengocok barang-barang ini sedikit.

Ratakan konten dan Ratakan item

Justify-content dan align-items adalah dua properti CSS yang membantu kami mendistribusikan item dalam penampung. Mereka mengontrol bagaimana item diposisikan di sepanjang sumbu utama dan sumbu silang .

Dalam kasus kami (tetapi tidak selalu) sumbu utama horizontal dan sumbu melintang vertikal:

Dalam artikel ini, kita hanya akan melihat justify-content, karena saya telah menemukan menggunakan yang ini lebih dari align-items. Namun, dalam kursus Flexbox saya, saya menjelaskan kedua properti tersebut secara detail.

Mari pusatkan semua item di sepanjang sumbu utama dengan menggunakan justify-content:

.container { display: flex; justify-content: center; } 

Atau kita bisa mengaturnya ke space-between, yang akan menambah spasi di antara item, seperti ini:

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

Berikut adalah nilai yang dapat Anda tetapkan justify-content:

  • mulai fleksibel ( default )
  • flex-end
  • pusat
  • ruang-antara
  • luar angkasa
  • ruang-merata

Saya akan merekomendasikan Anda untuk bermain-main dengan ini dan melihat bagaimana mereka bermain di halaman. Itu akan memberi Anda pemahaman yang tepat tentang konsep tersebut.

Mengontrol satu item

Kami juga dapat mengontrol item tunggal . Katakanlah kita, misalnya, ingin menyimpan dua item pertama di sisi kiri, tetapi memindahkan logouttombol ke sisi kanan.

Untuk melakukan ini, kita akan menggunakan teknik lama yang baik untuk mengatur margin auto.

.logout { margin-left: auto; } 

Jika kita ingin searchitem dan logoutitem didorong ke sisi kanan, kita cukup menambahkan margin-leftke searchitem sebagai gantinya.

.search { margin-left: auto; } 

Ini akan mendorong item pencarian sejauh mungkin ke sisi kanan, yang sekali lagi akan mendorong item keluar bersamanya:

Properti flex

Sejauh ini, kami hanya memiliki item dengan lebar tetap. Tetapi bagaimana jika kita ingin mereka responsif? Untuk mencapai itu kami memiliki properti yang disebut flex. Itu membuatnya jauh lebih mudah daripada cara lama menggunakan persentase.

Kami hanya akan menargetkan semua item dan memberinya flexnilai 1.

.container > div { flex: 1; } 

Seperti yang Anda lihat, itu meregangkan item untuk mengisi seluruh wadah.

Dalam banyak kasus, Anda mungkin ingin salah satu item menggunakan lebar ekstra, dan dengan demikian hanya menetapkan salah satu item agar memiliki lebar fleksibel. Kami dapat, misalnya, membuat searchitem tersebut mengambil semua ruang ekstra:

.search { flex: 1; } 

Sebelum kita mengakhiri artikel ini, saya ingin menyebutkan bahwa properti flex sebenarnya adalah singkatan dari tiga properti: flex-grow , flex-shrink, dan flex-basis . Namun, mempelajarinya membutuhkan waktu lebih dari lima menit, jadi itu di luar cakupan tutorial ini.

Jika Anda tertarik untuk mempelajarinya, saya akan menjelaskan ketiga properti secara menyeluruh dalam kursus Flexbox gratis saya.

Sekarang setelah Anda mempelajari dasar-dasarnya, Anda pasti akan siap untuk mengikuti kursus lengkap saya dan menjadi master Flexbox!

Terima kasih sudah membaca! Nama saya Per Borgen, saya adalah salah satu pendiri Scrimba - cara termudah untuk belajar kode. Anda harus memeriksa bootcamp desain web responsif kami jika ingin belajar membangun situs web modern pada tingkat profesional.