Penggunaan Align Items Pada Flexbox CSS3

Pada bagian ini kita akan masuk kebagian berikutnya untuk membahas satu property lagi dari flexboxnya. Pada bagian sebelumnya kita sudah berhasil membuat kolom childnya berada ditengah, kanan atau kirinya secara horizontal. Pada artikel kali ini kita akan membahas property Align Items yang mana membuat kolom childnya berada ditengah, kanan atau kirinya tentu secara vertical. Sebagai contoh misalnya parent boxnya memiliki tinggi 200px selain kita gunakan justify contentnya center kita juga bisa membuat align itemsnya jadi center sebagai berikut

Dan bila kita lihat sekarang bukan hanya secara horizontal tapi secara vertical pun kita bisa otomatis membuat kolom childnya berada ditengah. Maka hasilnya pun seperti ini

yang mana berapa pun tinggi yang saya berikan dia akan berusaha pas pasin semuanya berada ditengah seperti yang teman teman lihat sekarang. Selain center kita pun bisa memberikan flex-end yaitu mulai dari bagian bawah atau mulai dari atas menggunakan flex-start.

Agar teman teman dapat melihat hasilnya kita bisa berikan border. Sehingga kita dapat melihat mana batas awal dan mana batas akhirnya. Jadi agar lebih jelas. Poin penting dari property align items secara default nilai yang diberikan adalah stretch. Bila saya menulis ini di bagian parent boxnya

maka kita tidak dapat hasil apa apa. Agar dapat melihat hasilnya pastikan pada bagian CSS kolom childnya tidak boleh punya tinggi. Maka dia otomatis mengambil seluruh dari tinggi dari parentnya. 

Jadi itu dia kegunaan dari Align Items pada Flexbox CSSnya yang teman teman bisa gunakan. Sampai jumpa pada bagian berikutnya. Terima kasih