Pada kesempatan ini kita akan membahas betapa mudahnya menggunakan css flexbox pada saat mengoding.
Apa itu Flexbox ? Flexbox singkatan dari Flexible Box yaitu model layout 1 dimensi yang dapat mengatur jarak dan penjajaran antar item dalam sebuah container, Tetapi yg harus kita ingat flexbox hanya dapat mengatur 1 dimensi pada saat tertentu, antara baris atau kolom, tidak bisa keduanya sekaligus.
Kelebihan dari flexbox adalah kita tidak perlu mengatur jarak / space dan padding di antara items. Dengan menggunakan flexbox dia akan mengatur dengan sendirinya sesuai intruksi yg kita mau.
Property container Flexbox yaitu : flex-direction, flex-wrap, justify-content, align-items, align-content.
- Flex-direction untuk mengatur arah/urutan dari items di dalam container.
- Flex-wrap untuk mengatur ketika element yang kita punya sudah tidak muat lagi dalam container dalam barisnya.
- Justify-content mengatur jarak antar items.
- Align-items mengatur perilaku pejajaran items terhadap cross axis.
- Align-content mengatur jarak antar items terhadap cross axis.
