Hello Sahabat Nostra, kembali lagi dengan saya pada kesempatan kali ini yang akan membahas mengenai konsep Layouting Flexbox pada CSS 3.
Oke, pertama kita harus tahu dulu apa sih yang dimaksud dengan Flexbox itu? Dan apa faedahnya penggunaan sistem Layouting Flexbox pada tampilan antarmuka yang kita buat?
Yak menurut pemahaman yang saya baca dari berbagai sumber, Flexbox atau Flexible Box merupakan suatu module dalam CSS 3 yang berfungsi membuat suatu container pada tampilan halaman website menjadi fleksibel terhadap konten-konten yang ada didalamnya dengan memanfaatkan space yang tersedia. Dengan kata lain manfaat flexbox tersebut adalah kita tidak perlu lagi melakukan styling yang rumit pada setiap device yang resolusinya berbeda-beda karena konten secara otomatis melakukan penyesuaian dengan container yang telah kita set sebagai flex tadi.
Yang perlu dipahami, suatu container flex dibentuk berdasarkan 2 garis secara horizontal (main axis) dan vertical (cross axis). Berikut ilustrasi sebuah container flex:
Secara default garis horizontal (main axis) tersebut akan meletakan item-item(item flex) dimulai dari kiri kekanan pada container flex. Dan garis vertical pada flex container (cross axis) akan meletakan item flex dari atas kebawah pada container flex.
Dibawah ini merupakan beberapa property dari module flex yang perlu dipahami:
-display:
flex = Untuk menginisialisasi container sebagai flex.
-justify-content: #value = Untuk mengatur item flex secara horizontal.
-align-items: #value = Untuk mengatur item flex secara horizontal.
-flex-direction: #value = Untuk mengatur penempatan item pada container.
Berikut ini adalah cara belajar mengenal konsep flexbox dengan cara interaktif melalui link ini :
Tampilan Flexbox Froggy
Nah sekian pengenalan mengenai flexbox layout, sampai jumpa pada kesempatan selanjutnya.
References:
http://www.tutorial-webdesign.com/tutorial-flexbox-basic/
http://learnlayout.com/flexbox.html
https://www.w3schools.com/css/css3_flexbox.asp
No comments:
Post a Comment