Belajar CSS Flexbox

Align-Items dan Align-Self

Materi ini memiliki 1 buah lampiran. Namun Anda tidak dapat mengakses lampiran karena belum terdaftar di kursus ini. Klik disini untuk mendaftar.

Pada video ini kita akan membicarakan mengenai properti Align-Items dan Align-Self. Keduanya memiliki fungsi yang sama ya, yaitu untuk mengatur posisi item di dalam flexbox berdasarkan Cross Axis. Perbedaannya adalah Align-Items berlaku untuk semua item di dalam Flexbox, sedangkan Align-Self hanya berlaku untuk satu item saja.

Kita lihat ke Align-Items terlebih dahulu. Ada 5 buah nilai yang bisa kita berikan pada properti Align-Items. Yang pertama dan merupakan nilai default adalah Stretch, yang artinya item menggunakan seluruh ruang Cross Axis yang tersedia. Kita lihat pada gambar. Kita sedang menggunakan arah Main Axis Default yaitu dari kiri ke kanan, dan arah Cross Axis Default yaitu dari atas ke bawah. Setiap item di dalam flexbox ditarik ke bawah, sehingga memenuhi semua ruang vertikal di dalam flexbox.

Nilai kedua adalah flex-start, dimana item disusun di bagian awal dari Cross Axis. Kita bisa lihat pada gambar, semua kotak disusun secara rata atas. Nilai ketiga adalah flex-end, dimana item disusun di bagian akhir Cross Axis, pada contoh digambar semua kotak menjadi rata bawah. Nilai keempat adalah center, dimana semua kotak disusun di bagian tengah cross axis.

Dan nilai terakhir yang menarik adalah baseline, dimana item disusun rata berdasarkan kontennya. Pada gambar contoh, kita lihat bahwa tulisan di dalam kotak tersusun secara rata.

Kita mulai praktek. Kita buka source code dari video sebelumnya. Sebelum melanjutkan, kita ubah beberapa properti terlebih dahulu. Pada kelas container, kita ubah nilai properti width dan height menjadi 600 pixel. Kemudian kita hapus properti flex-direction, justify-content dan flex-wrap. Sekarang flexbox kita sudah kembali ke arah default, dengan Main Axis dari arah kiri ke kanan dan Cross Axis dari arah atas ke bawah.

Kita coba nilai pertama dari properti Align-Items, yaitu stretch. Tidak ada perubahan pada tampilan browser ya. Berhubung posisi Cross Axis kita sekarang adalah vertikal, maka untuk mendapatkan efek strecth, kita harus menghapus properti height pada kelas box. Nah, sekarang ukuran kotak sudah berubah, menjadi mengisi seluruh ruang vertikal.

Kemudian kita coba nilai kedua, yaitu flex-start. Sebelumnya kita kembalikan dahulu properti height pada kelas box. Lalu kita ubah nilai align-items menjadi flex-start. Tidak ada perubahan ya. Karena kotak memang sudah disusun pada bagian atas flexbox.

Untuk membuat agar contoh disini lebih menarik, kita coba height dari kotak hijau dan biru. Kita ke kelas green terlebih dahulu. Lalu kita ubah tingginya menjadi 2 kali lipat kotak lain dengan cara menambahkan properti height dengan nilai 200 pixel.

Lalu kita ubah kotak biru menjadi lebih pendek. Kita ke kelas blue. Lalu kita tambahkan properti height dengan nilai 75 pixel. Sekarang kita lihat bahwa kotak-kotak kita ada yang lebih tinggi dan ada yang lebih rendah, namun semuanya disusun secara rata pada bagian atas kotak.

Lalu kalau kita ubah nilai Align-Items menjadi flex-end. Maka sekarang kotak disusun secara rata pada bagian bawah kotak.

Nilai berikutnya yang bisa kita coba adalah Center. Sekarang kotak disusun pada bagian tengah secara vertikal.

Dan nilai yang menarik untuk dicoba disini adalah baseline. Kalau kita coba sekarang, maka kita mendapatkan hasil yang seolah-olah mirip dengan flex-start ya. Semua kotak disusun rata atas. Untuk melihat bedanya dengan flex-start, maka kita bisa mengubah font pada kotak hijau menjadi lebih besar. Misalkan kita ke kelas green, dan tambahkan properti font-size dengan nilai 8 rem. Sekarang posisi kotak lain menjadi turun. Dan kalau kita lihat pada konten setiap kotak, maka kita bisa melihat bahwa bagian bawah dari semua tulisan koten adalah sejajar.

Kita hapus lagi properti font-size pada kelas green. Selanjutnya yang menarik lagi untuk dicoba disini, kita ganti nilai align-items menjadi flex-end. Maka kotak-kotak disusun menjadi rata bawah. Nah, yang menariknya disini, arah Cross Axis bisa kita putar menjadi dari bawah ke atas. Caranya? Kita tambahkan properti flex-wrap dengan nilai flex-reverse. Hasilnya menjadi seolah-olah kita menggunakan nilai flex-start ya, karena arah Cross Axisnya telah berpindah menjadi dari bawah ke atas. Bagian akhir dari Cross Axis adalah atas.

Kita bisa melihat perbedaan dari penggunaan properti seperti ini apabila terjadi wrap. Misalkan nilai width kita ganti menjadi 300 pixel. Maka kotak 1 2 3 berada pada bagian awal Cross Axis yaitu di bawah. Sedangkan kotak 4 dan 5 berada di bagian atas.

Kalau arah Cross Axis kita kembalikan ke normal, yaitu nilai Wrap. Sedangkan Align-Items kita kembalikan ke flex-start. Maka kotak 1 2 3 berada pada bagian atas, dan kotak 4 5 berada di bagian bawah.

Kita juga bisa mencoba nilai-nilai lain dari Align-Items pada saat terjadi Wrap. Sebagai contoh lainnya, saya ubah nilai align-items menjadi stretch dan saya hapus properti height pada kelas box. Maka kita bisa melihat bahwa flexbox dibagi menjadi 2 baris. Lalu kotak yang tidak memiliki properti height akan ditarik untuk memenuhi seluruh ruang pada Cross Axis.

Saya kembalikan properti height pada kelas box. Lalu kita coba nilai flex-end pada align-items. Sekarang semua kotak disusun pada bagian bawah baris. Sedangkan kalau kita menggunakan nilai center, maka semua kotak akan disusun pada bagian tengah baris.

Selanjutnya kita coba putar Main Axis menjadi vertikal dari atas ke bawah. Secara otomatis Cross Axis berubah menjadi horizontal dari kiri ke kanan. Caranya? Kita sudah belajar dari video sebelumnya ya. Kita tambahkan properti flex-direction dengan nilai Column.

Pertama kita coba nilai align-items menjadi flex-start terlebih dahulu ya. Dan kita hapus properti flex-wrap. Sekarang semua kotak disusun secara rata pada bagian kiri. Karena arah awal Cross Axis kita berada di kiri ya. Sedangkan kalau kita ganti nilai align-items ke nilai flex-end, maka kotak akan rata di bagian kanan. Karena bagian akhir Cross Axis berada di sebelah kanan. Sementara kalau kita beri nilai center, maka seluruh kotak akan berada di bagian tengah.

Selanjutnya kita akan membahas mengenai properti Align-Self. Fungsinya masih sama dengan Align-Items, yaitu untuk mengatur posisi item berdasarkan Cross Axis. Namun Align-Self hanya berlaku untuk salah satu item saja ya. Sebagai contoh disini kita menggunakan Main Axis di arah default yaitu dari kiri ke kanan, dan Cross Axis di arah default dari arah atas ke bawah. Sedangkan properti Align-Self hanya digunakan pada kotak nomor tiga atau kotak berwarna hijau.

Kita bisa lihat pada nilai Stretch, semua kotak berada pada posisi rata atas, namun kotak hijau ditarik hingga menggunakan seluruh ruang Cross Axis. Kemudian pada nilai flex-start, semua kotak berada pada posisi bawah, sedangkan kotak hijau berada pada posisi atas.

Kita lihat pada nilai center, semua kotak berada pada posisi atas, namun kotak hijau berada di posisi tengah. Sedangkan pada nilai flex-end, semua kotak berada pada posisi atas, namun kotak hijau berada di posisi bawah.

Kita coba praktekkan properti align-self. Pertama kita ubah dahulu arah Main Axis dan Cross Axis menjadi default dengan cara mengapus properti Flex-Direction. Nilai Align-Items kita ubah menjadi Flex-Start. Lalu properti Width kita kembalikan ke nilai 600 px.

Kita akan mencoba properti align-self ini pada kotak hijau. Kita buka kembali kode HTML. Kalau sebelumnya, properti-properti Flexbox yang telah kita pelajari kita taruh pada kelas container. Untuk properti align-self ini, harus kita taruh pada item di dalam flexbox. Berarti mesti di salah satu div yang berada di dalam section ini.

Kalau kita mau merujuk ke kotak hijau, kita bisa melihat bahwa div ini menggunakan 2 buah kelas, yaitu box dan green. Sedangkan kelas box juga digunakan di kelima div. Jadi kalau kita ingin merujuk secara khusus ke kotak hijau, maka kita menaruh propertinya di dalam kelas green.

Kita kembali ke kode CSS dan kita menuju ke kelas green. Kita tambahkan properti align-self dengan nilai stretch. Tidak ada perubahan ya. Karena untuk menggunakan nilai ini, kita harus menghapus properti height-nya. Sekarang kita hapus properti height pada kelas green dan kelas box. Nah, sekarang kita bisa melihat bahwa semua kotak yang lain disusun secara flex-start atau rata atas, sedangkan kotak hijau ditarik hingga memenuhi seluruh ruang vertikal yang tersedia.

Kita kembalikan semua nilai height yang kita hapus barusan. Lalu kita ubah align-self menjadi flex-end. Nah, sekarang semua kotak berada di posisi atas, sedangkan kotak hijau berada di bawah sendiri. Kalau kita ubah menjadi center, maka kotak hijau berada di tengah. Sedangkan kalau kita ubah menjadi flex-start maka kotak hijau akan kembali ke atas.

Kita bisa menggunakan properti Align-Self ini di beberapa kotak sekaligus. Misalkan kita ingin kotak hijau berada di tengah, sedangkan kotak biru berada di bawah. Maka kita tinggal menambahkan ke kelas green properti Align-Self dengan nilai Center. Lalu kita tambahkan ke kelas blue, properti Align-Self dengan nilai Flex-End.

2 Jam 21 Menit
1. Pendahuluan 16 Menit
3. Head 13 Menit
10. Tabel 21 Menit
1 Jam 2 Menit
1. Form 15 Menit
2. Validasi 12 Menit
3. Input Type 15 Menit
4. Dropdown 9 Menit
1 Jam 29 Menit
9. Pseudo Class 11 Menit
3 Jam 26 Menit
2. Lebar/Width 13 Menit
16. CSS Reset 6 Menit
2 Jam 21 Menit
4. Flex-Wrap 10 Menit
3 Jam 17 Menit
7. Flex Utility 16 Menit
8. Operator 28 Menit
11. Objek String 18 Menit
4. Scope 10 Menit
5. Rekursif 10 Menit
8. Notasi Big O 24 Menit
4. Prototype 18 Menit
7. Map 19 Menit
8. Set 12 Menit
2. DOM Selector 40 Menit
7. DOM Traversal 14 Menit
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.