Mudahnya menggunakan CSS FLEXBOX

0
37

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.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.