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>

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).

3.5 CSS Grid

Berbeda dengan Flexbox yang cenderung satu dimensi, CSS Grid hadir sebagai sistem tata letak dua dimensi dalam CSS. Keunggulannya adalah kemampuannya untuk mengatur elemen secara simultan dalam lingkup baris (rows) dan kolom (columns) secara terstruktur.

Jika Flexbox unggul dalam mengatur susunan satu dimensi baik itu secara baris (row) maupun kolom (column), maka Grid menawarkan kapabilitas mengatur elemen dalam dua dimensi sekaligus. Oleh karena itu, Grid menjadi pilihan yang sangat ideal untuk mendefinisikan struktur utama (main layout) halaman web, seperti penempatan area header, sidebar, konten utama, hingga footer secara terkoordinasi.

Dengan Grid, Anda bisa:

Mengatur ukuran kolom dan baris secara fleksibel.
Menempatkan elemen di posisi spesifik dengan kontrol penuh.
Membuat desain responsif tanpa perlu nested div yang banyak.

display: grid

grid-template-columns: 1fr 2fr 1fr

grid-template-rows: auto 1fr auto

gap: 20px

Gambaran umum CSS grid

3.5.1 Grid Container Properties

Untuk mulai mengaktifkan sistem Grid, kita hanya perlu menambahkan properti display: grid; pada elemen parent atau wadah utama. Dengan deklarasi sederhana ini, semua elemen yang berada di dalam parent tersebut secara otomatis akan bertindak sebagai 'item Grid' yang siap kita susun dalam dua dimensi.

1) Grid Template Columns

Fungsinya adalah untuk menentukan jumlah dan ukuran kolom dalam grid.

Membuat tiga kolom dengan lebar tetap 200px.

grid-template-columns: 200px 200px 200px;

Membuat tiga kolom fleksibel, di mana kolom tengah dua kali lebih lebar dari yang lain (fr = fractional unit).

grid-template-columns: 1fr 2fr 1fr;

Cara cepat untuk membuat 3 kolom sama besar.

grid-template-columns: repeat(3, 1fr);

Kolom pertama dan terakhir tetap, kolom tengah fleksibel.

grid-template-columns: 200px 1fr 200px;

Skema ini sangat cocok digunakan untuk membangun tata letak situs yang umum (misalnya, sidebar di kiri, konten utama yang fleksibel di tengah, dan sidebar tambahan di kanan)

2) Grid Template Rows

Fungsinya adalah untuk mengatur tinggi baris (rows).

Membuat tiga baris dengan tinggi tertentu.

grid-template-rows: 100px 200px 100px;

Membuat tiga baris dengan tinggi fleksibel sama besar.

grid-template-rows: repeat(3, 1fr);

3) Gap (Jarak Antar Grid)

Berfungsi untuk mengatur jarak antar kolom dan baris dengan lebih simpel dan mudah diingat. Karena gap menggantikan grid-row-gap dan grid-column-gap di versi CSS lama.

gap: 20px;

row-gap: 20px;

column-gap: 20px;

4) Grid Template Areas

Fungsinya untuk menentukan layout berdasarkan "nama area" supaya kode terlihat lebih rapi. Grid ini memudahkan kita untuk mengatur layout besar tanpa banyak div bersarang.

grid-template-areas:

"header header header"

"sidebar main main"

"footer footer footer";

Cara bacanya:

Baris pertama punya 3 kolom, semuanya "header".
Baris kedua: 1 kolom "sidebar" dan 2 kolom "main".
Baris ketiga: semuanya "footer".

5) Justify Items dan Align Items

Digunakan untuk mengatur posisi isi elemen grid di dalam setiap sel.

justify-items: start; /* horizontal */

align-items: center; /* vertikal */

Pilihan umum:

start → posisi di awal
center → posisi tengah
end → posisi akhir
stretch → isi elemen memenuhi ruang sel

3.5.2 Grid Item Properties

Properti ini diterapkan pada elemen anak (grid item) dan berfungsi untuk mengontrol posisi serta ukuran spesifiknya di dalam area grid yang telah ditentukan oleh elemen induk.

1) Grid Column dan Grid Row

Berfungsi untuk menentukan posisi elemen berdasarkan nomor garis (line numbers). Berikut penulisan kodenya:

grid-column: 1/3;

grid-row: 2/4;

Arti dari kode diatas adalah elemen membentang dari garis kolom ke-1 sampai ke-3, dan dari baris ke-2 sampai ke-4. Atau bisa juga:

grid-column: 1/ span 2; /* melebar dua kolom */

grid-row: 1/ span 2; /* melebar dua baris */

2) Grid Area

Berfungsi untuk menentukan area berdasarkan nama yang sudah didefinisikan di grid-template-areas. Berikut penulisan kodenya:

grid-area: header;

grid-area: main;

grid-area: sidebar;

grid-area: footer;

3) Justify Self dan Align Self

Berfungsi untuk mengatur posisi individual dalam cell (mengabaikan pengaturan global dari container). Berikut penulisan kodenya:

justify-self: center;

align-self: end;

3.5.3 Contoh Penerapan Grid

1) Layout Website Sederhana

.layout {

display: grid;

grid-template-areas:

"header header header"

"sidebar main main"

"footer footer footer";

grid-template-columns: 200px 1fr 1fr;

grid-template-rows: 80px 1fr 60px;

gap: 20px;

height: 100vh;

}

.header { grid-area: header; background: #333; color: white; }

.sidebar { grid-area: sidebar; background: #f4f4f4; }

.main { grid-area: main; background: white; }

.footer { grid-area: footer; background: #333; color: white; text-align: center; }

Penjelasan umum:

grid-template-areas menentukan peta layout.
1fr memastikan area "main" fleksibel dan bisa melebar otomatis.
Kombinasi gap + grid-template bikin struktur halaman tetap proporsional di semua layar.

2) Card Grid (Auto Responsive)

.card-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

gap: 2rem;

padding: 2rem;

}

Penjelasan umum:

auto-fit dan minmax() membuat grid otomatis menyesuaikan ukuran layar.
Jika layarnya besar → banyak kolom muncul.
Jika sempit grid otomatis turun ke baris berikutnya (tanpa perlu media query!). Ini adalah cara modern untuk membuat grid responsif.

Cari Blog Ini

SMK Asiyah Homeschooling