Panduan lengkap belajar CSS flexbox

Flexbox atau kepanjangan dari Flexible Box dirancang sebagai model tata letak satu dimensi dan sebaga

Apa itu CSS flexbox?

Pada CSS3 terdapat fitur baru yaitu Flexible Box atau yang biasa disingkat flexbox. Flexbox sendiri telah hadir sejak tahun 2009 dan didukung hampir disemua browser modern, ini salah satu kemajuan teknologi yang hebat di bidang web developer.

Sebelumnya model layout yang tersedia adalah

  • Block
  • Inline
  • Tabel
  • Position

Ini sebagian besar dikelola dengan properti float. Jika Anda telah mencoba membuat tata letak dengan menggunakan properti float, Anda pasti mendapatkan kesulitan mengatur posisi tata letak yang diinginkan, apalagi Anda harus membersihkan sisa float yang tersisa dengan clearflix.

Perlu Anda ketahui bahwa properti float sendiri bukan diperuntukkan untuk membuat layout, melainkan untuk memposisikan gambar dalam text.

Dizaman sekarang design website merambah ke berbagai ukuran seperti: laptop, tablet atau smartphone. Flexbox hadir untuk memecahkan masalah tersebut. Flexbox dirancang sebagai model tata letak satu dimensi dan sebagai metode yang dapat memudahkan untuk menyelaraskan elemen satu sama lain dalam arah dan urutan yang berbeda.

Terminologi pada flexbox

ilustrasi dan terminologi pada css flexbox
diambil: https://www.w3.org/TR/css-flexbox-1/#box-model

Sebelum Anda mempelajari lebih lanjut tentang properti flexbox, penting untuk memahami terminologinya terlebih dahulu.

  • main-axis: adalah sumbu utama dari wadah/container fleksibel sepanjang item fleksibel diletakkan. Arahnya didasarkan pada properti flex-direction.
  • main-start | main-end: adalah item fleksibel yang ditempatkan dalam wadah yang dimulai pada sisi main-start dan akan menuju sisi main-end.
  • main-size: adalah width atau height wadah fleksibel atau item fleksibel mana pun yang ada dalam dimensi utama. 
  • cross axis: adalah sumbu tegak lurus dengan sumbu utamanya yang disebut sumbu silang atau cross axis. Arahnya didasarkan pada properti flex-direction.
  • cross-start | cross-endadalah garis lentur yang diisi dengan item dan ditempatkan ke dalam wadah mulai dari sisi cross-start wadah fleksibel dan menuju ke sisi ujung cross-end
  • cross-size: adalah width atau height item fleksibel mana pun yang berada dalam dimensi silang adalah cross size item.

Didalam flexbox terdapat dua sumbu (axis) yaitu sumbu utama (main axis) dan sumbu silang (cross axis). Kenapa istilahnya bukan Horizontal dan vertical? Karena Arah sumbu tersebut akan berubah berdasarkan flex-direction.

Ketika flex-direction bernilai row maka sumbu utama (main axis) nya adalah dari kiri ke kanan dan sumbu silang (cross axis) nya dari atas ke bawah. Berikut ilustrasinya jika Anda menggunakan flex-direction: row:

Dan apabila flex-direction bernilai column maka sumbu utama (main axis) nya adalah dari atas ke bawah dan sumbu silang (cross axis) nya dari kiri ke kanan. Berikut ilustrasinya jika Anda menggunakan flex-direction: column:

Jika Anda melihat kedua ilustrasi diatas, jadi arah sumbu utama (main axis) dan sumbu silang (cross axis) juga dapat dirubah tergantung dari nilai properti flex-direction.

Yang terakhir masih ada flex-direction: row-reverse; sehingga item diurutkan dari akhir ke awal atau dibalik, tentu arah sumbu utama (main axis) dan sumbu silang (cross axis) menjadi berubah urutannya.

Catatan: jangan khawatir jika Anda belum mengerti penggunaan flexbox. Ilustrasi diatas hanya perkenalan terminologi, Pada tulisan dibawah ini semuanya akan dibahas satu demi satu.

Penggunaan CSS flexbox

Perlu Anda ketahui bawah dalam flexbox terdapat dua komponen utama yaitu wadah/container dan anak/item. Untuk membuat CSS flexbox sangat sederhana dan mudah untuk diterapkan, dengan memberikan style display: flex; pada container, Anda sudah berhasil membuat CSS flexbox. Berikut contoh sederhana:

1
2
3
4
5
#container {
	display: flex;
}

Flex-direction

Dengan properti flex-direction Anda bisa menggunakannya untuk menentukan arah (direction) untuk item-item yang berada didalam container flexbox. Flex-direction mempengaruhi arah sumbu utama (main axis) dan sumbu silang (cross axis).

Secara default flex-direction bernilai row, ini artinya arah sumbu mengarah secara horizontal bukan vertikal.

Semua properti flex-direction dapat memiliki nilai berikut:

  • row – memberikan posisi secara horizontal dari Kiri ke Kanan (default)
  • row-reverse – memberikan posisi secara horizontal dari Kanan ke Kiri (Kebalikan dari row)
  • column – memberikan posisi secara vertikal dari Atas ke Bawah
  • column-reverse – memberikan posisi secara vertikal dari Bawah ke Atas (kebalikan dari column)

Berikut contoh dari flex-direction: row:

1
2
3
4
5
#container {
    display: flex;
    flex-direction: row;
}

Berikut contoh dari flex-direction: row-reverse:

1
2
3
4
5
#container {
    display: flex;
    flex-direction: row-reverse;
}

Berikut contoh dari flex-direction: column:

1
2
3
4
5
#container {
    display: flex;
    flex-direction: column;
}

Berikut contoh dari flex-direction: column-reverse:

1
2
3
4
5
#container {
    display: flex;
    flex-direction: column-reverse;
}

Flex-wrap

Dengan properti flex-wrap Anda bisa menggunakannya untuk membuat item didalamnya apakah harus membungkus ke baris baru jika sudah memenuhi lebar dari containernya?.

Semua properti flex-wrap dapat memiliki nilai berikut:

  • nowrap – jangan dibungkus ke baris baru (default)
  • wrap – dibungkus ke baris baru
  • wrap-reverse – dibungkus ke baris baru tetapi dibalik (item terakhir jadi pertama )

Berikut contoh flex-wrap: nowrap:

1
2
3
4
5
6
7
8
9
10
11
12
#container {
    display: flex;
    flex-wrap: nowrap;
}

Berikut contoh flex-wrap: wrap:

1
2
3
4
5
6
7
8
9
10
11
12
#container {
    display: flex;
    flex-wrap: wrap;
}

Berikut contoh flex-wrap: wrap-reverse:

1
2
3
4
5
6
7
8
9
10
11
12
#container {
    display: flex;
    flex-wrap: wrap-reverse;
}

Flex-flow shorthand

Dengan flex flow shorthand Anda bisa mempersingkat sebuah kode. Shorthand sendiri yang berarti “steno” atau menulis cepat. Dengan cara ini dimungkinkan juga untuk menentukan semua properti flex-direction dan flex-wrap dalam satu properti tunggal.

Untuk menggunakan flex flow shorthand Anda cukup menggunakan properti flex-flow.

Properti flex-flow shorthand hanya berlaku untuk dua properti dibawah ini:

  • flex-direction
  • flex-wrap

Berikut contoh flex-flow:

1
2
3
4
5
6
7
8
9
10
11
12
#container {
    display: flex;
    flex-flow: row wrap;
}

Justify-content

Dengan properti justify-content Anda bisa menggunakan untuk menyelaraskan item dalam container disepanjang sumbu utama (main axis) seperti mengatur posisi item menjadi yang paling kiri, tengah, kanan dan bahkan bisa memberikan sisa kekosongan ruang dari container secara merata pada item didalamnya.

Semua properti justify-content dapat memiliki nilai berikut:

  • flex-start – mengatur posisi disepanjang sumbu utama (main axis) dibagian awal, dan ini nilai defaultnya
  • center – mengatur posisi disepanjang sumbu utama (main axis) dibagian tengah
  • flex-end – mengatur posisi disepanjang sumbu utama (main axis) dibagian akhir
  • space-between – mengatur posisi disepanjang sumbu utama (main axis) untuk meratakan item secara merata. Item paling kiri rata kiri, paling kanan menjadi rata-kanan dan item ditengah akan diposisinkan rata tengah
  • space-around – Sama seperti space-between hanya saja space-around akan memberikan ekstra ruang kosong pada bagian awal/kiri dan akhir/kanan

Berikut contoh dari justify-content: flex-start:

1
2
3
#container {
    display: flex;
    justify-content: flex-start;
}

Berikut contoh dari justify-content: center:

1
2
3
#container {
    display: flex;
    justify-content: center;
}

Berikut contoh dari justify-content: flex-end:

1
2
3
#container {
    display: flex;
    justify-content: flex-end;
}

Berikut contoh dari justify-content: space-between:

1
2
3
#container {
    display: flex;
    justify-content: space-between;
}

Berikut contoh dari justify-content: space-around:

1
2
3
#container {
    display: flex;
    justify-content: space-around;
}

Align-items

Dengan properti align-items Anda bisa menggunakan untuk menyelaraskan item dalam container disepanjang sumbu silang (cross axis) seperti mengatur posisi item menjadi yang paling atas, tengah, bawah, juga bisa memberikan peregangan item untuk mengisi wadah dan menyelaraskan item fleksibel seperti garis dasarnya sejajar.

Semua properti align-items dapat memiliki nilai berikut:

  • stretch – mengatur posisi disepanjang sumbu silang (cross axis) untuk mengisi wadah (default)
  • flex-start – mengatur posisi disepanjang sumbu silang (cross axis) dibagian awal
  • center – mengatur posisi disepanjang sumbu silang (cross axis) dibagian tengah
  • flex-end – mengatur posisi disepanjang sumbu silang (cross axis) dibagian akhir
  • baseline – mengatur posisi disepanjang sumbu silang (cross axis) untuk menyelaraskan item seperti garis dasarnya sejajar

Berikut contoh dari align-items: stretch:

1
2
3
4
5
6
7
8
9
10
11
12
#container {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

Berikut contoh dari align-items: flex-start:

1
2
3
4
5
6
7
8
9
10
11
12
#container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

Berikut contoh dari align-items: center:

1
2
3
4
5
6
7
8
9
10
11
12
#container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

Berikut contoh dari align-items: flex-end:

1
2
3
4
5
6
7
8
9
10
11
12
#container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
}

Berikut contoh dari align-items: baseline:


1
2
3
4
#container {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
}

Align-content

Dengan properti align-content Anda bisa menggunakan untuk menyelaraskan item dalam container disepanjang sumbu silang (cross axis). Align-content ini hampir sama dengan align-items, hanya saja align-content berlaku jika jumlah itemnya lebih dari satu baris.

Semua properti align-content dapat memiliki nilai berikut:

  • stretch – mengatur posisi disepanjang sumbu silang (cross axis) untuk mengisi wadah (default)
  • flex-start – mengatur posisi disepanjang sumbu silang (cross axis) dibagian awal
  • center – mengatur posisi disepanjang sumbu silang (cross axis) dibagian tengah
  • flex-end – mengatur posisi disepanjang sumbu silang (cross axis) dibagian akhir
  • space-between – mengatur posisi disepanjang sumbu silang (cross axis) untuk meratakan item secara merata. Item yang terbungkus akan diposisikan paling atas sedangkan yang jatuh ke baris baru akan akan diposisikan paling bawah
  • space-around – Sama seperti space-between hanya saja space-around akan memberikan ekstra ruang kosong pada bagian awal/atas dan akhir/bawah
Informasi: Bisa dikatakan align-content ini adalah kebalikan dari justify-content, Jika justify-content berlaku pada sumbu utama (main-axis), sedangkan align-content berlaku pada sumbu silang (cross axis).

Berikut contoh dari align-content: stretch:

1
2
3
4
5
6
7
8
9
10
11
12
#container {
    display: flex;
    flex-wrap: wrap;
    align-content: stretch;
}

Berikut contoh dari align-content: flex-start:

1
2
3
4
5
6
7
8
9
10
11
12
#container {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}

Berikut contoh dari align-content: center:

1
2
3
4
5
6
7
8
9
10
11
12
#container {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}

Berikut contoh align-content: flex-end:

1
2
3
4
5
6
7
8
9
10
11
12
#container {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-end;
}

Berikut contoh align-content: space-between:

1
2
3
4
5
6
7
8
9
10
11
12
#container {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
}

Berikut contoh align-content: space-around:

1
2
3
4
5
6
7
8
9
10
11
12
#container {
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
}

Order

Dengan properti order Anda bisa menggunakannya untuk memanipulasi urutan item, ketika kita menggunakan order atau reordering berarti bahwa kita mengubah render visual item, sementara sumber urutan tetap utuh.

Keuntungan menggunakan properti order berarti kita tidak perlu mengubah struktur dokumen HTML hanya demi presentasi visual. Jadi, bot pembaca layar seperti googlebot bisa mendapatkan konten dalam cara yang logis dan terstruktur.

Nilai default order adalah 0, dan ini dapat mengambil nilai integer (angka) berapapun termasuk negatif.

Berikut contoh order:

1
2
3
4
5
#container {
    display: flex;
    flex-wrap: wrap;
}
.box1 {
    order: 3;
}
.box2 {
    order: 5;
}
.box3 {
    order: 4;
}
.box4 {
    order: 1;
}
.box5 {
    order: 2;
}

Berikut contoh order dengan nilai negatif

1
2
3
4
5
#container {
    display: flex;
    flex-wrap: wrap;
}
.box5 {
    order: -1;
}

Flex-grow

Dengan properti flex-grow Anda bisa menggunakannya untuk mengisi atau membagikan item terhadap sisa ruang container. Ini menentukan berapa jumlah ruang yang tersedia di dalam container fleksibel yang harus di isi item didalamnya.

Misalnya, jika semua item flex-grow disetel ke 1, setiap anak akan disetel ke ukuran yang sama di dalam container. Jika Anda memberi salah satu anak nilai 2, anak itu akan menghabiskan ruang dua kali lebih banyak dari yang lain.

Nilai default flex-grow adalah 0.

Berikut contoh flex-grow:

1
2
3
#container {
    display: flex;
    flex-wrap: wrap;
}
.box1 {
    flex-grow: 1;
}
.box2 {
    flex-grow: 2;
}
.box3 {
    flex-grow: 1;
}

Flex-shrink

Dengan properti flex-shrink Anda bisa menggunakannya untuk menyusutkan item terhadap sisa ruang container. Ini menentukan seberapa banyak item didalamnya yang akan menyusut relatif terhadap lebar container. Properti flex-shrink mirip dengan flex-grow ini hanya kebalikannya.

Misalnya, jika semua item flex-shrink disetel ke 1, setiap anak akan disetel ke ukuran yang sama di dalam container. Jika Anda memberi salah satu anak nilai 2, anak itu akan menyusutkan ruang dua kali lebih banyak dari yang lain.

Nilai default flex-shrink adalah 0.

Berikut contoh flex-shrink:

1
2
3
4
#container {
	display: flex;
}
.box1 {
    flex-shrink: 1;
}
.box2 {
    flex-shrink: 2;
}
.box3 {
    flex-shrink: 1;
}
.box4 {
    flex-shrink: 1;
}

Flex-basis

Dengan properti flex-basis Anda bisa menggunakan untuk menentukan ukuran awal dari item. Secara default nilai flex-basis diatur ke nilai auto untuk mengukur item sesuai dengan lebar isinya.

Ini hampir sama dengan width & height, namun flex-basis akan mengatur ukuran terlebih dahulu sesuai dengan sumbu utama (main-axis) atau sumbu silang (cross axis), jadi tergantung dari flex-direction yang Anda tentukan.

Berikut contoh tanpa flex-basis:

1
2
3

Berikut contoh menggunakan flex-basis:

1
2
3
#container {
    display: flex;
    flex-wrap: wrap;
}
.box {
    flex-basis: 120px;
}

Jika dilihat pada contoh diatas, kita sama sekali tidak memberikan width, hanya memberikan flex-basis: 120px;

Berikut contoh tanpa flex-basis dengan flex-direction: column:

1
2
3

Berikut contoh menggunakan flex-basis dengan flex-direction: column:

1
2
3
#container {
    display: flex;
    flex-flow: wrap column;
}
.box {
    flex-basis: 150px;
}

Jika dilihat pada contoh diatas, kita sama sekali tidak memberikan height, hanya memberikan flex-basis: 150px;

Flex shorthand

Dengan flex shorthand Anda bisa mempersingkat sebuah kode. Shorthand sendiri yang berarti “steno” atau menulis cepat. Dengan cara ini dimungkinkan juga untuk menentukan semua properti flex-grow, flex-shrink dan flex-basis dalam satu properti tunggal.

Untuk menggunakan flex shorthand Anda cukup menggunakan properti flex.

Properti flex shorthand hanya berlaku pada properti dibawah ini:

  • flex-grow
  • flex-shrink
  • flex-basis
#container {
    display: flex;
    flex-flow: wrap column;
}
.box {
    flex: 0 0 150px;
}

Align-self

Dengan properti align-self Anda bisa menggunakannya untuk menyelaraskan item tertentu yang dipilih (individu). Sifat dari align-self menimpa keselarasan standar yang ditetapkan oleh wadah align-items.

Align-self sangat mirip dengan properti align-items, keduanya mempunyai perbedaan yaitu: Jika align-self difokuskan untuk item individu sedangkan align-items dikhususkan untuk semua item.

Semua properti align-self dapat memiliki nilai berikut:

  • stretch – mengatur posisi disepanjang sumbu silang (cross axis) untuk mengisi wadah (default)
  • flex-start – mengatur posisi disepanjang sumbu silang (cross axis) dibagian awal
  • center – mengatur posisi disepanjang sumbu silang (cross axis) dibagian tengah
  • flex-end – mengatur posisi disepanjang sumbu silang (cross axis) dibagian akhir
  • baseline – mengatur posisi disepanjang sumbu silang (cross axis) untuk menyelaraskan item seperti garis dasarnya sejajar

Berikut contohnya:

Default
Flex Start
Center
Flex End
Stretch (default)
#container {
    display: flex;
    flex-wrap: wrap;
}
.flex-start {
    align-self: flex-start;
}
.center {
    align-self: center;
}
.flex-end {
    align-self: flex-end;
}
.stretch {
    align-self: stretch;
}

Berikut contoh dari align-self: baseline:


1
2
3
4
#container {
    display: flex;
}
.box {
    align-self: baseline;
}