CSS Flexbox merupakan Model layout 1 dimmensi ( secara horizontal saja atau secara vertical) yang dapat mengatur jarak atau penjajaran antar item dalam sebuah container. Kode Editor menggunakan Visual Studio Code (https://code.visualstudio.com/download) yang digunakan untuk praktek pembelajaran ini.
Istilah istilah
- container : wadah atau pembungkus flex box
- items : elemen - elemen yang berada didalam suatu container flex box
- main axis : sumbu utama dari sebuah container yang menentukan urutan dari penempatan items secara horizontal
- cross axis :sumbu utama dari sebuah container yang menentukan urutan dari penempatan items secara vertical
- main size : ukuran(width / height) dari container yang akan membuta dimensi dari items nya relatif terhadap main size ( ukuran di flex box bahkan bisa dibuat dinamis )
- cross size : ukuran container secara vertical atau panjang atau panjang kebawah
- main-start : untuk memnentukan awal elemen yang posisinya menjajar secara horizontal
- main-end : untuk menentukan akhir elemen yang posisinya menjajar secara horizontal
- cross-start : untuk mnentukan awal elemen yang posisinya menjajar secara vertical
- cross-end : untuk menentukan akhir elemen yang posisinya menjajar secara vertical
Property -Propery dari Pembungkus Flexbox atau Container flex box
A. display: flex;
Untuk membuat baris sejajar horizontal kita cukup pasang saja display dengan value flex didalam containernya saja jadi tidak hanya elemen - elemen didalamnya yang disesusaikan. Sebagai Perbandingan berikut kode mensejajarkan secara horizontal dengan float, yaitu harus memasang float dengan value left atau right dan memasang clear.
Kode diatas dapat dioptimalkan dngan menggunakan flexbox supaya lebih simple
B. flex-direction
Untuk mengatur arah atau urutan dari items didalam container
- row : nilai default, urutan elemen dimulai dari kiri secara horizontal ( mirip float dengan value left )
- row-reverse : urutan elemen dimulai dari kanan ke kiri secara horizontal ( mirip float dengan value right )
- column : urutan elemen dimulai dari atas ke bawah
- column-reverse : urutan dimulai dari bawah ke atas
Berikut penerapan kode diatas, slilhakan ganti value direction dari row menadi row-reverse/column/column-reverse untuk melihat perbedaannya
C. flex-wrap
Secara default ( nowrap ), semua item di dalam container selalu berada didadalm satu baris meskipun ukuran sudah tidak cukup. wrap memungkinkan untuk memindahkan items ke baris dibawahnya.
- nowrap : nilai default, elemen akan selalu memaksa sebaris dan tidak berpindah baris
- wrap : wrap memungkinkan untuk memindahkan items ke baris dibawahnya
- wrap-reverse : menukar baris dari kondisi wrap
Mengatur jarak antar items.
E . align-items
Mengatur perilaku penjajaran items terhadap cross axis atau vertical
flex-start | flex-end
flex-start => mepet atas dan flex-end => mepet bawah
center
center => element berada ditengah dari containernya
stretch => element dengan height memenuhi container sehingga jika ingin berfungsi jangan memberikan nilai height secara manual.
baseline => mengatur pensejajaran berdasarkan konten di dalamnya
E . align-content
Mengatur jarak antar items terhadap cross axis dengan ketentuan ketka items lebih dari 1 baris.
- flex-start = elemens dari atas ke bawah
- flex-end = elemens dari atas ke bawah
- center = elemens di tengah secara vertical
- stretch = elemens dengan tinggi memenuhi container dengan elemens tidak ditentukan ukuran tingginya
- space-between = elemen bariis pertama mepet atas dan elemen baris terkahir mepet bawah sisanya jika ada elemensya akan dibagi dengan jarak yang sama
- space-around = anatara baris pertama dengan selanjutanya akan membagi sisi atas dan sisi bawah secara sama, begitu seterusnya sampai baris terakhir
Property -Property dari Elemens didalam Container Flexbox
A. order
Menentukan urutan elemen - elemen didalam satu container flexbox
B. flex-grow / flex
Menentukan ukuran semua elemen atau secara spesifik untuk suatu elemen dengan elemen lain menyesuaikan secara dinamis.
C. align-self
Mengatur perilaku penjajaran sebuah item yang spesifik terhadap cross axis( khusus 1 elemen saja tidak seperti align-item yang merupakan property container yang mengatur semua elemen)
