Postingan
Tutorial Web Dasar Part 4: Membuat Layout Halaman Rapi Menggunakan CSS Flexbox
Assalamualaikum Wr. Wb.
Tutorial Web Dasar Part 4: Membuat Layout Halaman Rapi Menggunakan CSS Flexbox | Anti Berantakan | Sering kesal karena posisi tombol, sidebar, atau kartu artikel berantakan dan susah disejajarkan ke samping? Dulu kita sering memakai tag <table> atau CSS float yang ribet, tapi sekarang sudah ada fitur modern bernama Flexbox. Kali ini admin akan membagikan panduan praktis menggunakan Flexbox yang sudah admin uji coba dan hasilnya work 100%.
Properti Dasar Flexbox
Kunci utama Flexbox adalah mengaktifkan mode flex pada elemen pembungkus (container):
- display: flex; : Mengaktifkan tata letak fleksibel pada elemen anak.
- justify-content: Mengatur posisi horizontal (center, space-between, space-around).
- align-items: Mengatur posisi vertikal (center, flex-start, flex-end).
- gap: Memberikan jarak antar kotak secara instan tanpa perlu repot mengatur margin satu per satu.
Maka akan tampil kartu sejajar rapi seperti di atas
Contoh Penerapan Layout Kartu Berdampingan
Berikut adalah source code lengkap yang bisa langsung anda copy paste ke file HTML dan CSS anda:
<!DOCTYPE html>
<html>
<head>
<title>Tutorial Flexbox Sederhana</title>
<style>
.container {
display: flex;
justify-content: space-between;
gap: 20px;
padding: 20px;
background-color: #e2e8f0;
}
.card {
flex: 1;
background-color: #ffffff;
padding: 20px;
border-radius: 6px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="card">
<h3>Layanan 1</h3>
<p>Deskripsi fitur website pertama.</p>
</div>
<div class="card">
<h3>Layanan 2</h3>
<p>Deskripsi fitur website kedua.</p>
</div>
<div class="card">
<h3>Layanan 3</h3>
<p>Deskripsi fitur website ketiga.</p>
</div>
</div>
</body>
</html>Itulah tutorial cara mudah mengatur tata letak website dengan Flexbox. Jika elemen belum sejajar, pastikan properti display: flex; ditaruh pada tag induk (container), bukan di dalam elemen anaknya.
Sekian tutorial kali ini, semoga bermanfaat, jika ada kesalahan mohon di maafkan, jika berguna mohon di share ke Social Media.
Terima Kasih.
Wassalamualaikum Wr. Wb.
Sumber gambar: Koleksi Pribadi / Screenshot Praktik
0 Komentar
Posting Komentar
Pengunjung yang baik selalu meninggalkan komentar
Silahkan berikan komentar/kritik/saran tentang artikel ini untuk kemajuan blog ini,
Mohon untuk tidak berkomentar berbau SARA, Pornografi, Spam, dan kata-kata kasar agar tidak terjadi kesalah pahaman disini.
Terima Kasih