Pada video ini kita akan membicarakan mengenai properti Align-Content dan Order.

Kita mulai dari Align-Content terlebih dahulu. Properti Align-Content ini mirip dengan properti Justify-Content yang telah kita pelajari pada video sebelumnya. Fungsinya adalah untuk mengatur pembagian sisa ruang berdasarkan Cross Axis. Jadi perbedaan dengan Justify-Content adalah Axis-nya, kalau Justify-Content berdasarkan Main Axis, sedangkan Align-Content berdasarkan Cross Axis. Dan properti Align-Content ini hanya bisa berfungsi apabila terjadi Wrap.

Ada 6 buah nilai yang bisa kita berikan ke properti Align-Content. Bisa kita lihat pada slide. Disini kita menggunakan Main Axis dengan arah default yaitu dari kiri ke kanan, dan Cross Axis dengan arah default dari atas ke bawah. Nilai flex-start mengatur agar kotak berada di bagian awal cross axis, yaitu bagian atas. Nilai flex-end mengatur agar kotak berada di bagian akhir cross axis, yaitu dibawah. Nilai center mengatur agar kotak berada di bagian tengah secara vertikal. Nilai space-around akan memberikan margin pada bagian atas dan bawah setiap kotak, sehingga akibatnya jarak antara kotak 1 dan 4 menjadi 2 kali lebih besar dibandingkan jarak kotak 1 ke tepi container. Nilai space-evenly membagikan sisa ruang secara merata. Dan yang terakhir nilai space-between menyebabkan kotak menempel dibagian tepi container, sedangkan sisa ruangnya dibagikan secara rata di tengah.

Kita mulai praktek. Kita buka source code dari video sebelumnya. Sebelum melanjutkan, kita kembalikan dahulu kondisi kotak kita ke kondisi normal. Pertama pada kelas container, kita hapus properti align-items. Lalu kita ke kelas green dan menghapus properti height dan align-self. Kita lakukan hal yang sama pada kelas blue.

Oke, sekarang kita memiliki 5 kotak yang ukurannya sama besar yang berjejer ke samping. Pertama kita coba dahulu tambahkan properti align-content dengan nilai center. Kita tambahkan pada kelas container. Kita simpan dan refresh browser. Tidak ada efek ya. Karena properti align-content ini hanya bisa berfungsi apabila terjadi wrap.

Jadi kita tambahkan lagi properti flex-wrap dengan nilai wrap. Kita simpan dan refresh browser. Sekarang kotak kita berpindah ke tengah secara vertikal. Disini fungsi properti align-content masih sama dengan properti align-items yang kita pelajari pada video sebelumnya. Kalau misalnya saya ubah properti align-content menjadi align-items, maka hasilnya adalah sama.

Yang membedakan kedua properti tersebut adalah apabila terjadi wrap. Agar terjadi wrap, maka kita ubah width dari kelas container menjadi 300 pixel. Nah, pada align-items, kotak-kotak disusun dalam 2 baris, dan masing-masing kotak ditaruh di bagian tengah baris.

Kalau kita ubah properti align-items menjadi align-content, maka kedua baris akan digabung dan kotak ditaruh di tengah.

Kita bisa mencoba nilai-nilai lain dari align-content, seperti flex-start, flex-end, space-around. Nah, disini kita bisa melihat dengan lebih jelas efek dari space around. Flexbox akan memberikan margin dengan jumlah yang sama pada bagian atas kotak 1 dan pada bagian bawah kotak 1. Begitu juga dengan kotak-kotak yang lainnya. Sebagai akibatnya, jarak antara kotak 1 ke kotak 4, menjadi 2 kali lebih besar dibandingkan dengan jarak antara kotak 1 ke tepi container.

Apabila kita ingin agar jarak antara container ke kotak menjadi sama dengan jarak antar kotak, maka kita bisa menggunakan nilai space-evenly. Selanjutnya kita bisa mencoba nilai space-between. Maka kotak 1 2 3 akan menempel pada bagian awal Cross Axis, dan kotak 4 5 menempel di bagian akhir dari Cross Axis. Sisa ruang kosong dibagikan secara rata pada bagian tengah.

Selanjutnya kita akan membahas mengenai properti order, yang digunakan untuk mengatur posisi item di dalam Flexbox. Nilai default dari order adalah 0, dimana items di dalam Flexbox akan disusun berdasarkan urutannya pada kode HTML. Kalau kita lihat pada contoh di slide, pada saat order bernilai 0, maka urutan kotak kita adalah 1 2 3 4 5.

Kalau misalkan kita memberikan nilai 1 pada order kotak nomor 3, maka kotak nomor 3 akan berpindah ke bagian akhir dari Main Axis. Sedangkan kalau kita berikan nilai negatif satu pada order kotak nomor 3, maka kotak nomor 3 akan berpindah ke bagian awal Main Axis.

Kita kembali ke coding. Kita kembalikan dahulu flexbox kita ke kondisi awal, dengan cara mengubah width menjadi 600 pixel. Lalu kita hapus properti align-content dan flex-wrap. Sekarang kita memiliki 5 buah kotak yang berurutan ke samping kanan dengan nomor 1 2 3 4 5.

Apabila teman-teman bertanya, bagaimana bisa terjadi nomor yang berurutan dari satu sampai lima? Jawabannya berada di kode HTML-nya. Kita buka kembali kode HTML. Kita lihat ke dalam tag section. Terdapat lima buah tag div, yang kontennya berurutan 1 hingga 5.

Jadi kalau kita hendak mengubah urutan kotak, kita bisa mengeser posisi div di dalam kode HTML ini. Sebagai contoh, kalau kita ingin kotak nomor 3 berada di paling kiri, maka kita bisa cut kode kotak nomor 3. Lalu memindahkannya ke sebelum kotak nomor 1. Atau kalau kita ingin agar kotak nomor 3 berada di paling kanan, maka kita bisa memindahkan kodenya ke bawah kotak nomor 5.

Namun biasanya programmer lebih suka untuk mengubah posisi kotak tanpa perlu menyentuh kode HTML. Hal ini bisa kita lakukan dengan menggunakan properti order di dalam Flexbox. Jadi kita bisa mengembalikan kode HTML kotak nomor 3 ke bagian tengah flexbox. Lalu kita kembali ke kode CSS.

Nah, untuk mengubah posisi kotak, kita bisa menggunakan properti order di kotak yang hendak kita pindahkan. Sebagai contoh, apabila kita hendak memindahkan kotak nomor 3, maka pertama kita ke kelas green terlebih dahulu. Lalu kita tambahkan properti order dengan nilai 1. Maka sekarang kotak nomor 3 pindah ke bagian paling akhir dari Main Axis, yaitu di sebelah kanan.

Selanjutnya apabila kita hendak memindahkan kotak nomor 2 ke sebelah kanan juga, maka kita bisa ke kelas yellow. Lalu kita tambahkan properti order dengan nilai 1. Maka kotak nomor 2 akan berpindah ke kanan. Namun berhubung kotak nomor 2 dan nomor 3 memiliki nomor order yang sama, maka browser akan mengurutkan kotak berdasarkan kode HTML-nya, yaitu 2 dahulu baru 3. Apabila kita ingin agar kotak nomor 2 berada di paling kanan, maka kita bisa memberikan nilai order yang lebih besar dari nilai order pada kotak hijau, misalnya kita beri nilai 2.

Sebaliknya, apabila kita ingin memindahkan posisi kotak ke bagian awal Main Axis, maka kita bisa memberikan nilai negatif pada order. Sebagai contoh, kita hapus dahulu properti order pada kelas Yellow. Kemudian kita ubah nilai order pada kelas green menjadi -1. Maka kotak hijau akan berpindah ke sebelah kiri.

Kemudian apabila kita hendak memindahkan kotak biru ke kiri juga, maka kita bisa menambahkan order dengan nilai -1 pada kelas blue. Maka urutan kotaknya menjadi 3 dahulu, kemudian 4. Apabila kita ingin agar kotak biru berada di paling kiri, maka kita bisa memberikan nilai yang lebih minus pada properti ordernya, sebagai contoh -2. Maka sekarang kotak biru berada di posisi paling kiri.

Perlu diingat bahwa arah Main Axis ini bisa kita ubah. Sekarang kita dalam kondisi default dengan arah Main Axis dari kiri ke kanan. Apabila saya mengubah arah Main Axis menjadi dari kanan ke kiri, dengan cara menambahkan properti flex-direction dengan nilai row-reverse pada kelas container. Perhatikan bahwa nilai order yang negatif, tadinya memindahkan kotak ke sebelah kiri, sekarang berubah menjadi memindahkan kotak ke sebelah kanan. Nantinya teman-teman bisa mencoba sendiri untuk mengetahui lebih lanjut efek dari nilai order dengan flex-direction lain seperti column dan column-reverse.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.