BERITA PROGRAMMING Mengenal Flexbox Pada CSS

Mengenal Flexbox Pada CSS

Oleh Muhammad Aziz Pratama | Senin, 9 Agustus 2021

Halo teman-teman ! kali ini saya akan membahas secara singkat tentang flexbox pada CSS.

Daftar Isi Artikel

Apa itu Flexbox ?

Flexbox atau Flexible Box merupakan sebuah mode pengaturan atau konsep layout pada CSS yang digunakan untuk mengatur elemen atau container beserta item didalamnya pada halaman web.
Sebelum Flexbox, ada beberapa layout model yang sudah ada, yaitu :

Block
Inline
Table
Positioned

Setelah adanya Flexbox, membuat halaman web yang responsive dan pembuatan struktur layout lebih mudah daripada memakai float atau positioning.

Persiapan

Baiklah, kita langsung mulai saja bagaimana penerapan Flexbox beserta property yang dimilikinya.

Disini kita bisa menyiapkan sebuah container dan item-nya pada HTML :

<div class="container">

<div>item 1</div>

<div>item 2</div>

<div>item 3</div>

</div>

Property Flex pada Container

1. display

Langkah pertama untuk membuat sebuah container menjadi flex, adalah menambahkan “flex” pada property “display”. Hal ini akan membuat container yang kita punya menjadi flex dan dapat memakai property flex.

.container {
display: flex;
}

2. flex-direction

dengan menggunakan property “flex-direction”, maka kita dapat menentukan arahnya item-item yang ada didalam container.

Row (default) : item akan berurutan dari kiri ke kanan
Row-reverse : kebalikan dari row, item berurutan dari kanan ke kiri
Column : sama seperti row, tetapi akan berurutan dari atas ke bawah
Column-reverse : sama seperti row-reverse. Tetapi berurutan dari bawah ke atas

.container { flex-direction: row | row-reverse | column | column-reverse;}

3. flex-wrap

defaultnya, item pada flex akan mencoba masuk atau fit ke dalam satu baris atau row. Kita bisa membuat item yang berlebihan untuk lanjut ke baris atau kolom berikutnya.

Nowrap (default): semua item akan berada di satu baris
Wrap: item flex akan pindah ke baris selanjutnya apabila tidak muat, dari atas ke bawah
Wrap-reverse: sama seperti wrap, tetapi arah nya dari bawah ke atas.

.container { flex-wrap: nowrap | wrap | wrap-reverse;}

4. Justify-content

property ini memungkinkan kita mengkontrol atas penyelarasan (alignment) item flex yang berada di dalam container.

Flex- start: posisi item akan dikemas pada bagian awal “flex-direction”
Flex-end: posisi item akan dikemas pada bagian akhir “flex-direction”
Center: posisi item akan dikemas ke bagian tengah baris
Space-between: letak item akan didistribusikan secara merata, item pertama ada pada bagian start dan item terakhir pada bagian end.
Space-around: letak item akan didistribusikan secara merata dengan space/ruang yang ada diantara item.

.container{ justify-content: flex-start | flex-end | center | space-between | space-around;}

baiklah, sampai sini dulu ya teman-teman. Untuk lebih jelasnya, kalian bisa mengunjungi website yang sudah saya cantumkan di bagian referensi. Semoga artikel ini dapat membantu kalian, Terima Kasih !