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

Penggunaan-Align-Items-Pada-Flexbox-CSS3-12-03-2017-1

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

Penggunaan-Align-Items-Pada-Flexbox-CSS3-12-03-2017-2

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.

Penggunaan-Align-Items-Pada-Flexbox-CSS3-12-03-2017-3

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

Penggunaan-Align-Items-Pada-Flexbox-CSS3-12-03-2017-4

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. 

Penggunaan-Align-Items-Pada-Flexbox-CSS3-12-03-2017-5

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

12 Maret 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat