CSS Flexbox Layout (Bagian-1)

Posted at : Apr/08/2021
2132 Views | 0 Comments

Flexbox (flexible box) layout atau flex (flexible) layout merupakan salah satu fitur yang terdapat di dalam css yang berfungsi untuk mengatur layout, aligning, dan mengatur space objek dalam sebuah kontainer. Kontainer yang dibuat secara fleksibel dapat mengubah lebar dan tinggi objek di dalamnya agar objek dapat menggunakan space atau ruang yang tersedia. Hal tersebut bermanfaat untuk membuat layout yang sifatnya responsive, misalnya untuk dikonsumsi oleh aplikasi mobile dan web yang sesuai dengan ukuran layar dan device.

Flex container dapat memperbesar objek di dalamnya agar dapat memenuhi ruang kosong yang tersedia, begitu juga mampu untuk memampatkannya agar tidak “overflow”. Flex layout dapat mengatur posisi objek secara vertikal maupun horizontal melalui properti flex-direction, sedangkan kemampuan untuk memperbesar dan memampatkan objek dilakukan dengan mengubah properti flex-wrap.

Properti display dari sebuah kontainer dapat menggunakan nilai flex atau inline-flex. Default display memiliki nilai box yang mengatur objek di dalamnya secara vertikal dan kontainer akan memiliki lebar dengan nilai selebar mungkin sesuai dengan ruang yang tersedia. Nilai flex akan membuat objek di dalam kontainer disusun secara horizontal dengan lebar kontainer yang menyesuaikan dengan lebar ruang yang tersedia, sedangkan nilai inline-flex juga akan menyusun objek secara horizontal namun dengan lebar kontainer yang akan menyesuaikan dengan total dari lebar semua objek di dalam kontainer.

Kontainer yang mengatur objek di dalamnya disebut dengan flex container, sedangkan objek di dalam kontainer tersebut disebut dengan flex items.

Mari kita lakukan simulasi berikut ini. Gunakan code editor sesuai dengan preferensi masing-masing.

1. Buat file html misalnya dengan nama flexbox.html dan ketikkan kode berikut ini di dalamnya:

flexbox css

2. Buat file css misalnya dengan nama style1.css dan ketikkan kode berikut ini di dalamnya:

flexbox css

3. Buat file javascript misalnya dengan nama javascript1.js dan ketikkan kode berikut ini di dalamnya:

flexbox css

Buka file flexbox.html dengan browser dan perhatikan hasil simulasinya dengan klik button-button yang tersedia untuk mengubah properti css yang berhubungan dengan flexbox secara dinamis.

flexbox css

Gambar 1. Default display box menampilkan flex items secara vertikal dan menyisakan ruang kosong sebelah kanan sesuai dengan lebar window browser.

flexbox css

Gambar 2. Flex display menyusun flex items secara horizontal dan lebar flex container akan menyesuaikan dengan lebar window browser sehingga apabila dilihat pada gambar di atas akan menghasilkan ruang kosong disebelah kanan.

flexbox css

Gambar 3. Inline flex display menyusun flex items secara horizontal dan lebar flex container menyesuaikan dari total lebar flex items.

flexbox css

Gambar 4. Inline flex dengan column direction menyusun flex items secara vertikal.

flexbox css

Gambar 5. Inline flex dengan column reverse direction menyusun flex items secara vertikal dan susunannya dimulai dari box paling bawah yaitu box nomor 4.

flexbox css

Gambar 6. Inline flex dengan row direction menyusun flex items secara horizontal.

flexbox css

Gambar 7. Inline flex dengan row direction dan flex-wrap bernilai wrap menyusun flex items secara horizontal dan susunan box nya akan menyesuaikan dengan lebar flex container. Browser di atas diresize windownya sehingga box yang keempat akan berpindah posisinya ke bawah. Apabila window diresize lebih kecil maka box yang ketiga juga akan berpindah ke bawah sejajar dengan box-4.

Selamat mencoba :)


[Comments]


[Write your comment]

Name (required)

Email (required-will not published)

 
Comment
BAUX
Input code above below (Case Sensitive) :

ABOUT ME

Rully Yulian MF
Rully Yulian Muhammad Firmansyah | Founder & IT Trainer Native Enterprise | MCT (2008-2019) | MVP (2009-2016) | Xamarin Certified Professional | MTA | MCAD | MCPD | MOS | Bandung, West Java, Indonesia.

[Read More...]

TOP DOWNLOAD

Mapping Hak Akses User Pada MenuStrip Sampai Control Button
downloaded 6982 times

Bagaimana caranya menginstal database ketika deploying sebuah aplikasi?
downloaded 4893 times

Simple Voice Engine Application With Sound Player Class...
downloaded 4045 times

Change Group,Sort Order, Filtering By Date in Crystal Reports
downloaded 3460 times

WinForms DataGrid Paging With SqlDataAdapter
downloaded 2881 times


LINKS

CERTIFICATIONS

Xamarin Certified
MOS 2007
MCT
MCPD
MCTS
MCAD.NET
ASP.NET Brainbench

NATIVE ENTERPRISE

Native Enterprise - IT Training

FOLLOW ME

Youtube  Facebook  Instagram  LinkedIn   Twitter

RSS


NATIVE ENTERPRISE NEWS

© Copyright 2006 - 2024   Rully Yulian MF   All rights reserved.