Programming Fundamental 9

3.4 Layout dengan Flexbox

Salah satu inovasi signifikan dalam CSS adalah Flexbox (Flexible Box Layout). Ini adalah modul tata letak modern yang dirancang untuk mengatur posisi elemen secara fleksibel dan responsif, baik dalam orientasi horizontal (row) maupun vertikal (column).

Sebelumnya, para developer sering mengandalkan properti float untuk mencapai keselarasan elemen sejajar. Namun, dengan hadirnya Flexbox, proses penataan layout menjadi jauh lebih sederhana, terstruktur, dan efisien.

Dengan Flexbox, Anda bisa dengan mudah:
  • Menyusun elemen berbaris (row) atau menumpuk (column),
  • Mengatur jarak antar elemen,
  • Menyusun elemen di tengah layar,
  • Dan bikin tampilan tetap rapi walau ukuran layar berubah.

3.4.1. Cara Kerja Flexbox

Setiap layout Flexbox terdiri dari dua bagian utama:
  • Flex Container → elemen pembungkus utama (parent). Contohnya <div class="flex-container">.
  • Flex Items → elemen-elemen di dalamnya (child). Contohnya <div class="item">...</div>.
Untuk mulai menggunakan Flexbox, tambahkan kode display: flex; pada elemen container-nya. Maka secara otomatis akan membuat semua child di dalamnya berbaris horizontal (row). Berikut contoh penulisan kode HTML-nya:

<ul class="flex-list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

CSS:

.flex-list {
    display: flex;
}

Hasilnya:
  • Sebelum pakai display: flex, semua item akan turun ke bawah (vertikal).
  • Setelah pakai display: flex, item langsung sejajar ke samping (horizontal).

3.4.1.1 Properti pada Flex Container

Flex container memiliki beberapa properti penting untuk mengatur arah, posisi, dan pembungkus (wrap) elemen.

1) flex-direction

Fungsinya adalah untuk menentukan arah elemen akan ditampilkan (horizontal atau vertikal). Contoh penulisan kodenya:

flex-direction: row; /* default */
flex-direction: column;

Penjelasan:
  • row → item sejajar dari kiri ke kanan
  • column → item disusun dari atas ke bawah

2) flex-wrap

Fungsinya adalah untuk mengatur apakah elemen akan pindah baris kalau sudah penuh. Contoh penulisan kodenya:

flex-wrap: nowrap; /* default */
flex-wrap: wrap;

Penjelasan:
  • nowrap → semua item tetap di satu baris (meski kepotong)
  • wrap → item otomatis turun ke baris berikutnya kalau ruangnya nggak cukup

3) justify-content

Fungsinya adalah untuk mengatur posisi elemen di sumbu utama (main axis), biasanya horizontal. Contoh penulisan kodenya:

justify-content: flex-start; /* default */
justify-content: center;
justify-content: flex-end;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;

Penjelasan:
  • flex-start → item menumpuk di kiri
  • center → item rata tengah
  • flex-end → semua item di bagian bawah
  • space-between → item tersebar dengan jarak di antaranya
  • space-around → ada jarak di kiri-kanan tiap item
  • space-evenly → semua jarak sama rata
Contoh visual justify-content: flex-start

4) align-items

Fungsinya adalah untuk mengatur posisi elemen di sumbu silang (cross axis), biasanya vertikal. Contoh penulisan kodenya:

align-items: stretch; /* default */
align-items: center;
align-items: flex-start;
align-items: flex-end;
align-items: baseline;

Penjelasan:
  • stretch → tinggi item mengikuti container
  • center → semua item rata tengah secara vertikal
  • flex-start → semua item di bagian atas
  • flex-end → semua item di bagian bawah
  • Baseline → menyelaraskan elemen fleksibel pada garis dasar kontainer.
Contoh visual align-items: stretch

5) align-content

Digunakan untuk mengatur posisi beberapa baris item ketika Flexbox-nya wrap. Contoh penulisan kodenya:

align-content: center;
align-content: space-between;
align-content: space-around;

Penjelasan:
  • center → item rata tengah
  • space-between → item tersebar dengan jarak di antaranya
  • space-around → ada jarak di kiri-kanan tiap item

3.4.1.2 Properti pada Flex Item

Properti ini diterapkan pada elemen di dalam flex container. Terdapat beberapa properti yang dapat diterapkan:

1) flex-grow

Berfungsi mengatur seberapa besar elemen boleh tumbuh untuk mengisi ruang kosong.
Artinya elemen akan melar untuk mengisi ruang yang ada.
Berikut penulisan kodenya:

flex-grow: 1;

2) flex-shrink

Berfungsi mengatur seberapa banyak elemen menyusut ketika ruang tidak cukup. Berikut penulisan kodenya:

flex-shrink: 0; /* tidak menyusut */

3) flex-basis

Berfungsi menentukan ukuran awal dari elemen sebelum dipengaruhi grow/shrink. Berikut penulisan kodenya:

flex-shrink: 0; /* tidak menyusut */

4) flex (shorthand)

Merupakan kombinasi dari tiga properti di atas. Berikut penulisan kodenya:

flex: grow shrink basis;
flex: 1; /* grow:1 shrink:1 basis:0 */
flex: 2 1 200px; /* grow dua kali lebih besar dari elemen lain */

5) align-self

Mengatur posisi satu elemen secara independen (mengabaikan align-items). Berikut penulisan kodenya:

align-self: center;
align-self: flex-end;

3.4.2. Contoh Praktis Flexbox

1) Navigation Bar

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background: #333;
}
.nav-links {
    display: flex;
    gap: 2rem;
    list-style: none;
}

Penjelasan:
  • justify-content: space-between bikin logo di kiri dan link di kanan.
  • align-items: center biar semuanya sejajar di tengah secara vertikal.
2) Navigation Bar

.card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
}
.card {
    flex: 1 1 300px;
    max-width: 400px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

Penjelasan:
  • Flexbox bikin susunan card otomatis menyesuaikan lebar layar.
  • Kalau layarnya sempit card pindah ke baris bawah karena flex-wrap: wrap.
3) Centering (Menengahkan Elemen dengan Flex)

.center-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

Penjelasan:
  • justify-content ngatur rata tengah horizontal,
  • align-items ngatur rata tengah vertikal.
  • Kombinasi ini sering dipakai buat bikin loading screen atau hero section.

3.4.3 Flexbox dan Responsive Design

Perlu dicatat bahwa Flexbox menunjukkan kinerja yang sangat optimal ketika dipadukan dengan Media Queries. Kombinasi ini memungkinkan kita untuk mencapai desain yang benar-benar fleksibel dan adaptif di berbagai rentang ukuran layar perangkat.

Berikut contoh penulisan kodenya:

.flex-list {
    display: flex;
    flex-wrap: nowrap;
}
@media (max-width: 1000px) {
    .flex-list {
        flex-wrap: wrap;
    }
    .flex-list li {
        width: 50%;
    }
}
@media (max-width: 670px) {
    .flex-list li {
        width: 100%;
    }
}

Penjelasan:
  • Di atas 1000px → item sejajar dalam satu baris.
  • Di bawah 1000px → item jadi dua baris (wrap).
  • Di bawah 670px → semua item tampil vertikal (1 kolom).


Komentar

Posting Komentar

Postingan populer dari blog ini

SIPD Chrome Extension untuk Migrasi Data dari SIPD ke SIMDA PINK Th. Anggaran 2022

Gambar
1. Siapkan Server untuk tempat backup DB lokal menggunakan WP-SIPD Sangat disarankan menggunakan hardware PC server untuk menginstall web server yang akan digunakan untuk migrasi data. Penggunaan hardware akan berpengaruh pada kecepatan saat melakukan singkronisasi. Sebaiknya juga menggunakan domain dan IP publik agar aplikasi bisa diakses dari internet. Hal ini akan mempermudah dikemudian hari untuk melakukan singkronisasi dari manapun. Pastikan web server aplikasi wp-sipd dapat terhubung dengan jaringan dari server database sql server simda. Berikut langkah-langkah install WP-SIPD pada PC server windows: Download xampp dengan php versi 7.xx, jangan menggunakan versi 8.xx karena saat ini driver odbc belum support. File dapat didownload di  https://www.apachefriends.org/download.html . Selain XAMPP dapat menggunakan web server lain sesuai kebutuhan. Yang terpenting adalah modul PHP dan database MYSQL Edit file php.ini yang bisa diakses melalui control panel XAMPP. Klik menu Config ...
Baca selengkapnya

Mapping Sumber Dana di WP-SIPD

Gambar
Permasalah mapping sumber dana di SIPD kemendagri terjadi karena settingan sumber dana melekat pada sub kegiatan dan nilai pagunya tidak mengunci atau hasil akumulasi pada rincian belanja. Hal ini membuat pemda sangat kesulitan dalam melakukan monitoring evaluasi pagu per sumber dana melalui aplikasi SIPD. Fitur custom mapping sumber dana pada aplikasi WP-SIPD dibuat untuk menyelesaikan masalah ini. Untuk menggunakan fitur ini silahkan mengikuti langkah berikut ini: Update plugin wp-sipd yang terbaru dari master zip di repository  https://github.com/agusnurwanto/wp-sipd . Jika menggunakan tool GIT tinggal jalankan perintah git pull origin master untuk mengupdate script terbaru wp-sipd. Singkronkan dulu data master Sumber Dana dari SIPD ke WP-SIPD pada menu Referensi - Sumber Dana menggunakan sipd-chrome-extension. Untuk cara installasinya bisa cek artikel  https://smkasiyahhomeschooling.blogspot.com/2021/12/sipd-chrome-extension-untuk-migrasi.html . Pada dashboard admin word...
Baca selengkapnya

Dokumentasi Aplikasi Migrasi Aset SIMDA BMD

Gambar
  Aplikasi migrasi aset dari SPBMD ke SIMDA BMD ini berbentuk plugin wordpress. Untuk melakukan installasi harus sudah menginstall wordpress terlebih dulu. Selanjutnya bisa donwload atau clone plugin SIMDA BMD di  https://github.com/agusnurwanto/SIMDA-BMD . Upload plugin di folder wp-content/plugins dan aktifkan plugin. 1. Setting Koneksi Database Login menggunakan user administrator wordpress. Buka menu SIMDA BMD  dan isi form koneksi database. Status koneksi database SIMDA . Berwarna merah berarti konfigurasi belum terkoneksi ke database SIMDA BMD. Berwarna hijau berarti sudah terkoneksi. URL API SIMDA berisi url dari aplikasi repository  https://github.com/agusnurwanto/SIMDA-API-PHP . Aplikasi ini berfungsi untuk membuat API PHP ke database SQL server. APIKEY SIMDA berisi random string untuk keperluan pengamanan request API Database SIMDA adalah nama database yang dipakai oleh SIMDA BMD Status koneksi database MYSQL SPBMD . Berwarna merah berarti belum terkone...
Baca selengkapnya