Belajar CSS Bagian 12: Fungsi dan Contoh CSS Flexbox Layout

Dalam belajar CSS bagian 11, kita telah belajar tentang fungsi dan contoh CSS Grid layout. Pada series lanjutan belajar CSS bagian 12 ini, kita akan belajar tentang apa itu Flex layout, fungsi hingga contohnya pada website.

Apa itu Flexbox Layout?

CSS Flexible Box layout atau sering disebut dengan Flexbox layout adalah sebuah sistem CSS yang berfungsi untuk menyederhanakan tata letak tampilan website.

Flexbox dapat mengatur elemen secara responsif baik dalam arah horizontal maupun vertikal, tanpa perlu menggunakan tata letak tradisional yang lebih kompleks seperti float atau positioning.

Flexbox sangat berguna untuk membuat tata letak tampilan website yang dinamis, seperti menyamakan elemen di tengah, membagi ruang secara proporsional, atau mengatur elemen dengan ukuran berbeda agar tetap seimbang di berbagai perangkat.

Fungsi CSS Flexbox

Berikut adalah fungsi utama dari CSS Flexbox:

• Mengatur elemen secara horizontal atau vertikal: Flexbox dapat diatur dalam satu arah, baik itu secara horizontal (row) maupun secara vertikal (column).
• Membuat elemen responsif: Elemen menggunakan layout flexbox dapat menyesuaikan ukurannya secara otomatis sesuai dengan ukuran layar sehingga dapat membuatnya lebih responsif.
• Membagi elemen dengan mudah: Properti seperti justify-content, align-items, dan align-content dapat disesuaikan dengan posisi elemen seperti tengah, kiri, kanan, atas, bawah, atau secara merata dalam kontainer.
• Membagi ruang secara proporsional: Properti seperti flex-grow dan flex-shrink, layout flexbox dapat membagi ukuran secara merata.
• Mengatur urutan elemen: Properti order dapat mengubah urutan tampilan elemen tanpa harus memindahkan elemen tersebut.
• Mengatur elemen dengan ukuran dinamis: CSS layout flexbox dapat mengelola elemen dengan ukuran berbeda di dalam kontainer yang sama.

Dasar Penggunaan CSS Flexbox

Setelah mengetahu pengertian dan fungsi dari flexbox, selanjutnya dalam belajar CSS bagian 12 ini kami akan menjabarkan tentang dasar penggunaan css flexbox. Berikut penggunaan dasarnya:

1. CSS Flexbox Layout

Untuk menggunakan Flexbox layout anda harus membuat sebuah container dengan property : display dan menggunakan nilai / value flex. Berikut contohnya:

.container {
  display: flex;
}

2. CSS Flex Container

Setelah Anda membuat sebuah elemen kontainer menggunakan properti display:flex, maka secara otomatis layout pada kontainer tersebut akan menggunakan layout flexbox container, sehingga Anda dapat menggunakan beberapa properti lain yang digunakan oleh layout flexbox.

3. CSS Flex Items

Setelah membuat elemen kontainer dengan layout flexbox, maka anda dapat menggunakan beberapa properti flex item. Berikut beberapa properti yang sering digunakan dalam membangun tampilan website menggunakan flex yaitu :

• display
• flex-direction
• justify-content
• align-items
• align-content
• order
• dll

4. CSS Flex Responsive

Selain itu menggunakan layout flexbox dapat menyesuaikan berdasarkan ukuran layar pengunjung website, properti yang digunakan yaitu flex-direction dan flex-wrap.

Properti yang sering digunakan

Berikut adalah beberapa properti yang sering digunakan pada css flexbox.

1. display

Pertama kali agar kontainer menggunakan flexbox, maka property display harus menggunakan nilai / value flex. Berikut contohnya :

.container {
  display: flex;
}

2. flex-direction

Properti flex-direction dapat menentukan arah yang akan menampilkan elemen yang ada di dalam container flexbox. Arah tersebut dapat mengarah berbaris atau horizontal (dari kiri ke kanan atau sebaliknya), atau seperti kolom/vertikal (dari atas kebawah atau sebaliknya). Berikut contohnya :

.container {
  display: flex;
  flex-direction: column;
}

3. justify-content

Properti justify-content digunakan untuk menentukan elemen agar sejajar di antara elemen secara horizontal. Berikut contohnya :

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

4. align-items

Properti align-items digunakan untuk menentukan elemen di dalam kontainer agar sejajar di antara elemen secara horizontal. Berikut contohnya :

.container {
  display: flex;
  align-items: center;
}

5. align-content

Properti align-content digunakan untuk menentukan elemen di dalam kontainer agar sejajar di antara elemen secara vertikal. Berikut contohnya :

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

6. order

Properti order digunakan untuk mengubah urutan elemen di dalam kontainer flex. Anda dapat mengurutkan dari awal hingga akhir atau dari atas ke bawah (flex-direction:column) atau dari kiri ke kanan (flex-direction:row). Berikut contohnya :

.container {
  display: flex;
  flex-direction: row;
}

Contoh Implementasi Flexbox Layout

Untuk membuat layout flexbox, Anda harus membuat sebuah container html dengan property display menggunakan nilai/value flex. Berikut contoh skripnya:

<div class="flex-container">
</div>

kemudian untuk script CSS-nya yaitu:

.flex-container {
  display: flex;
  flex-direction: column;
}

Selanjutnya, tambahkan item di dalam kontainer yang dibuat seperti di atas, berikut contoh script htmlnya.

<div class="flex-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>  
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>  
</div>

Kemudian, tambahkan script CSS untuk mengatur flex layout pada kontainer html tersebut, berikut contoh script lengkapnya :

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
    display: flex;
    background-color: blueviolet;
    gap: 10px;
    padding: 10px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 400px;
}
.item {
    text-align: center;
    background-color: aqua;
    padding: 10px;
    font-size: 28px;
}
</style>
</head>

<body>
<div class="grid-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>  
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>  
</div>
</body>
</html>

Kemudian jika di testing di browser untuk tampilan layar lebar (laptop/dekstop pc), akan menampilkan screenshoot seperti berikut :

Sedangkan jika di testing di browser untuk tampilan layar kecil (mobile/smartphone), akan menampilkan screenshoot seperti berikut :

Kesimpulan

Flexbox dapat mengatur elemen secara responsif baik dalam arah horizontal maupun vertikal, tanpa perlu menggunakan tata letak tradisional yang lebih kompleks. Dengan menguasai Flexbox, Anda akan lebih mudah menciptakan desain yang responsif, modern, dan fungsional.

Demikian artikel belajar css bagian ke 12 tentang CSS Flexbox layout. Nantikan terus series belajar css selanjutnya yang kami publikasi tiap satu bulan sekali. Semoga bermanfaat.