Belajar CSS FlexBox #Bagian 3 Align Items
Di seri ke 3 belajar css flexbox ini saya akan membahas bagaimana cara menggunakan property align-items. Tapi sebelumnya teman - teman bisa baca terlebih dahulu postingan saya sebelumnya tentang justify-content, karena masih ada hubungannya.
Gambar dia atas adalah contoh perbedaan flex-start, flex-end, center dan stretch, untuk source codenya bisa lihat di bawah ini.
Property align-items memungkinkan kita untuk menyelaraskan items di sepanjang sumbu silang atau cross axis, dengan kata lain mengatur posisi items di sepanjang cross axis / vertikal.
Property align-items bisa digunakan secara bersamaan dengan property justify-content, ketika kedua property ini digunakan secara bersamaan maka kita menempatkan items kedalam banyak posisi.
Berikut ini adalah nilai yang biasanya sering digunakan oleh property align-items:flex-start, flex-end, center,stretch. Khusus nilai stretch, tinggi dari items harus memiliki nilai auto. Untuk lebih jelasnya penggunaan nilai tersebut bisa lihat gambar di bawah ini.
 |
| align-itemLflex-start dan align-items:flex-end |
 |
| align-items:center dan align-item:stretch |
Gambar dia atas adalah contoh perbedaan flex-start, flex-end, center dan stretch, untuk source codenya bisa lihat di bawah ini.
Jika teman-teman ada pertanyaa silahkan tinggal pesan di kolom komentar. Happy Coding...
Post a Comment for "Belajar CSS FlexBox #Bagian 3 Align Items "