Flexbox Layout

Apa Itu Flexbox?

Flexbox adalah teknik layout di CSS yang digunakan untuk menyusun elemen dalam satu arah: secara horizontal (baris) atau vertikal (kolom). Metode ini disebut satu dimensi karena hanya mengatur layout dalam satu sumbu pada satu waktu, tidak dua arah seperti CSS Grid.


<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title></title>
    <style>
	.container {
        height: 400px;
 
        display: flex;
        gap: 16px;
 
        background-color: lightgray;
    }
 
	  .box {
		width: 100px;
		height: 100px;
		background-color: lightcoral;
	  }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
  </body>
</html>

Pada contoh kode di atas, elemen dengan class .container diatur sebagai flex container menggunakan display: flex;

Komponen Utama Pada Flexbox

Flexbox terdiri dari 2 komponen utama:

1. Flex Container (Wadah Fleksibel):

Ini adalah elemen parent HTML yang menggunakan properti CSS display: flex;. Dalam contoh code diatas, elemen <div class="container"> berperan sebagai flex container.

2. Flex Items (Item-Item Fleksibel):

Ini adalah elemen-elemen child yang langsung berada di dalam flex container. Dalam contoh code diatas, semua elemen <div class="box"> adalah flex items.
Flex items menjadi fleksibel dalam hal ukuran dan urutan tampilannya, tergantung pada properti CSS yang diterapkan pada flex container.

Catatan:

Ketika kita menggunakan display: flex; pada suatu elemen, semua elemen anak langsung di dalamnya akan menjadi flex items yang fleksibel. Kita bisa mengatur posisi, ukuran, urutan, dan jaraknya menggunakan properti-properti CSS khusus untuk flex container maupun flex items.

pada contoh code diatas, ada properti gap, ini adalah salah satu properti css flex container yang digunakan untuk mengatur jarak antar flex items.

Properti-Properti CSS pada Flex Container

berikut adalah beberapa properti CSS pada flex Container:

flex-direction

Properti ini menentukan arah utama (main axis) dan arah silang (cross axis) dari flex items di dalam container.

Nilai yang umum digunakan:

row (default): Item-item diatur secara horizontal dari kiri ke kanan.
row-reverse: Item-item diatur secara horizontal dari kanan ke kiri.
column: Item-item diatur secara vertikal dari atas ke bawah.
column-reverse: Item-item diatur secara vertikal dari bawah ke atas.


.container {
	height: 400px;
 
	display: flex;
	flex-direction: column;
	gap: 16px;
 
	background-color: lightgray;
}

justify-content

Properti ini mengatur bagaimana flex items didistribusikan sepanjang main axis (arah utama). Ini membantu dalam mengatur posisi horizontal item jika flex-direction adalah row (atau row-reverse), dan posisi vertikal jika flex-direction adalah column (atau column-reverse).

nilai yang digunakan:

flex-start (default): Item-item ditempatkan di awal main axis.
flex-end: Item-item ditempatkan di akhir main axis.
center: Item-item ditempatkan di tengah main axis.
space-between: Ruang kosong di antara item-item akan didistribusikan secara merata. Item pertama akan berada di awal, dan item terakhir akan berada di akhir.
space-around: Ruang kosong di sekitar setiap item akan didistribusikan secara merata. Setiap item akan memiliki ruang yang sama di kedua sisinya.
space-evenly: Ruang kosong di antara dan di sekitar item-item akan didistribusikan secara merata.


.container {
        height: 400px;
 
        display: flex;
        justify-content: space-between;
        gap: 16px;
 
        background-color: lightgray;
      }

align-items

Properti ini mengatur bagaimana flex items disejajarkan sepanjang cross axis (arah silang). Ini membantu dalam mengatur posisi vertikal item jika flex-direction adalah row (atau row-reverse), dan posisi horizontal jika flex-direction adalah column (atau column-reverse). Beberapa nilai umum:

stretch (default): Item-item diregangkan untuk mengisi tinggi (atau lebar, tergantung flex-direction) dari container.
flex-start: Item-item disejajarkan di awal cross axis.
flex-end: Item-item disejajarkan di akhir cross axis.
center: Item-item disejajarkan di tengah cross axis.
baseline: Item-item disejajarkan berdasarkan garis dasar teks mereka.


.container {
	height: 400px;
 
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
 
	background-color: lightgray;
}

flex-wrap

Properti ini menentukan apakah flex items harus dipindahkan ke baris atau kolom baru jika tidak cukup ruang dalam satu baris atau kolom.

nowrap (default): Semua item akan berada dalam satu baris atau kolom. Jika tidak cukup ruang, item-item akan mengecil (tergantung properti flex-shrink pada item).
wrap: Item-item akan dipindahkan ke baris atau kolom baru jika tidak cukup ruang. Arah perpindahan baris atau kolom ditentukan oleh flex-direction.
wrap-reverse: Mirip dengan wrap, tetapi arah perpindahan baris atau kolom akan terbalik.


.container {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
 
### flex-flow
 
Properti singkat (shorthand) untuk mengatur `flex-direction` dan `flex-wrap` secara bersamaan. 
 
Contoh: 
 
```css
flex-flow: row wrap;

gap

Properti ini digunakan untuk memberikan jarak antar flex items, tanpa perlu menambahkan margin secara manual pada masing-masing item.

Properti - Properti CSS pada Flex Items

Selain properti pada flex container, ada juga properti CSS yang secara spesifik diterapkan pada flex items (.box pada code diatas) untuk mengatur perilaku dan ukurannya di dalam flex container.

berikut adalah beberapa properti CSS pada flex items:

flex-grow, flex-shrink, flex-basis, flex (shorthand)


<div class="container">
  <div class="box red"></div>
  <div class="box blue"></div>
  <div class="box yellow"></div>
  <div class="box green"></div>
</div>

flex-grow

Properti ini menentukan kemampuan sebuah flex item untuk bertambah ukurannya relatif terhadap flex items lainnya di dalam container ketika ada ruang kosong yang tersisa.

Nilai defaultnya adalah 0. Ini berarti item tidak akan bertambah ukurannya untuk mengisi ruang kosong.
Jika memberikan nilai positif (misalnya 1, 2, dst.), item akan bertambah ukurannya. Item dengan nilai flex-grow yang lebih tinggi akan mengambil proporsi ruang kosong yang lebih besar.


.container {
	width: 800px;
	padding: 16px;
 
	display: flex;
	gap: 16px;
 
	background-color: lightgray;
}
 
.box {
	width: 150px;
	height: 150px;
}
.red {
	background-color: red;
	flex-grow: 1;
}
.blue {
	background-color: blue;
	flex-grow: 2;
}
.yellow {
	background-color: yellow;
}
.green {
	background-color: green;
	flex-grow: 2;
}

Properti ini menentukan kemampuan sebuah flex item untuk mengecil ukurannya relatif terhadap flex items lainnya di dalam container ketika tidak ada cukup ruang.

Nilai defaultnya adalah 1. Ini berarti item akan mengecil jika diperlukan.
Jika memberikan nilai 0, item tidak akan mengecil, bahkan jika itu menyebabkan overflow (keluar dari batas container).

untuk mendemonstrasikan flex-shrink, kita akan ubah lebar setiap box menjadi 200px.

Karena 4 box x 200px = 800px, awalnya pas. Tetapi karena kita tambahkan padding pada container, total lebar kontennya menjadi lebih besar dari 800px, sehingga item-item perlu menyusut. Properti flex-shrink akan menentukan bagaimana setiap box menyusut.

contoh kode dibawah adalah menerapkan properti flex-shrink dengan value 0 pada box .blue, artinya box .blue ini tidak akan menyusut


.box {
    width: 200px;
    height: 150px;
}
.red {
	background-color: red;
}
.blue {
	background-color: blue;
	flex-shrink: 0;
}
.yellow {
	background-color: yellow;
}
.green {
	background-color: green;
}

flex-basis

Properti ini menentukan ukuran awal (initial main size) dari sebuah flex item sebelum ruang kosong didistribusikan oleh flex-grow dan flex-shrink.

Nilainya bisa berupa auto (default), yang berarti ukuran awal item akan didasarkan pada properti width atau height (tergantung flex-direction). Jika tidak ada nilai width atau height yang ditentukan, ukurannya akan didasarkan pada konten item.
Nilai juga bisa berupa nilai panjang (misalnya 100px, 50%, dll.), yang akan menetapkan ukuran awal item.


.box {
	width: 150px;
	height: 150px;
}
.red {
	flex-basis: 50%;
	background-color: red;
}

Dalam kode ini, .red memiliki flex-basis: 50%. Ini berarti ukuran lebar awal 50% dari 800px. Elemen-elemen lainnya (.blue, .yellow, dan .green) akan memiliki lebar awal 150px sesuai dengan aturan .box.

Properti `flex` (Shorthand)

Seringkali, ketiga properti ini (flex-grow, flex-shrink, flex-basis) digabungkan menjadi satu properti singkat (shorthand) bernama flex.

sintaknya adalah:


flex: <flex-grow> <flex-shrink> <flex-basis>;

Beberapa nilai umum untuk properti flex:

flex: 0 1 auto; (nilai default): Item tidak akan tumbuh, akan menyusut jika perlu, dan ukuran awalnya otomatis berdasarkan width/height atau konten.
flex: 1 1 auto; atau flex: auto;: Item akan tumbuh dan menyusut secara proporsional, dengan ukuran awal otomatis. Ini sering digunakan untuk membuat item mengisi ruang yang tersedia secara merata.
flex: 0 0 auto; atau flex: none;: Item tidak akan tumbuh atau menyusut, dan ukuran awalnya otomatis.
flex: <angka positif>; Contoh: flex: 1; sama dengan flex: 1 1 0;. Item akan tumbuh untuk mengisi ruang yang tersedia, akan menyusut jika perlu (dengan rasio default 1), dan ukuran awalnya nol (sebelum distribusi ruang).

align-self

Properti ini digunakan untuk mengatur alignment flex item secara individual di sepanjang cross axis (sumbu silang) di dalam flex container. dan ini bisa untuk menimpa (override) properti align-items pada flex container.

nilai yang umum bisa digunakan:

auto: ini nilai default. Item menggunakan nilai dari properti align-items pada flex container.
flex-start: Item disejajarkan di awal cross axis.
flex-end: Item disejajarkan di akhir cross axis.
center: Item disejajarkan di tengah cross axis.
baseline: Item disejajarkan berdasarkan baseline teksnya.
stretch: Item direntangkan untuk mengisi seluruh tinggi (atau lebar, tergantung pada flex-direction) dari container.


.container {
	height: 500px;
	padding: 16px;
	
	display: flex;
	align-items: center;
	gap: 16px;
	
	background-color: lightgray;
	}
	
.box {
	width: 150px;
	height: 150px;
	}
.red {
	background-color: red;
	}
.blue {
	background-color: blue;
	align-self: flex-start;
	}
.yellow {
	background-color: yellow;
	}
.green {
	background-color: green;
	align-self: flex-end;
	}