Berkenalan Dengan Flexibel Box Model

Bagikan

Share on facebook
Share on whatsapp
Share on twitter
Share on email

Apa Itu Flexbox?

Flexible Box biasa disebut flexbox merupakan mode layout yang ada di CSS3 dan digunakan untuk mengatur elemen di suatu halaman web.

Flexbox ini akan mengatur ukuran dari elemen anaknya secara otomatis, dan mampu beradaptasi dengan ukuran container-nya.

Untuk Apa Flexbox?

Tujuan dari flexbox yaitu memberikan container kemampuan untuk mengatur panjang, lebar, dan posisi item-item yang berada di dalamnya agar memaksimalkan ruang yang ada. Pengaturan ini sangat penting bagi seorang frontend developer untuk membuat sebuah website yang nyaman dilihat di berbagai device dengan berbagai macam resolusi.

Konsep Dasar Flexbox

Pada modul flexbox terdapat flex container yaitu sebuah container yang menampung beberapa flex item. Relasi pada flexbox ini adalah relasi parent-child dimana setiap elemen flex item pasti merupakan anak langsung dari suatu elemen flex container.

Flexbox mempunyai sistem koordinat sendiri, yaitu

Main Axis : garis horizontal yang membentang dari kiri ke kanan (default)

Cross Axis : garis vertikal yang membentang dari atas ke bawah (default)

Flex item bediri pada suatu garis yang disebut flex line. Flex line dapat horizontal maupun vertikal tergantung penentuan di properti flex direction. Pada dasarnya item yang dibuat akan berada sepanjang garis flex line dari main-start ke main-finish atau dari cross-start ke cross-finish.

Apa saja property container Flexbox ?

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

* Flex-direction

Menentukkan arah (direction) yang akan diberlakukan untuk item-item yang ada pada container flexbox. Arah yang dimaksud adalah apakah ingin mengarah berbaris/horizontal (dari kiri ke kanan atau sebaliknya) atau seperti kolom/vertikal (dari atas kebawah atau sebaliknya).

* Flex-wrap

Flex-wrap digunakan untuk mendefinisikan bahwa elemen item di dalam container flexbox tidak harus disejajarkan dalam satu baris. Artinya, elemen item tersebut digulung (dipindahkan) ke baris baru bila sudah memenuhi lebar container-nya.

* Justify-content

Justify-content digunakan untuk mensejajarkan item-item diantara flexbox agar container dari flexbox tersebut bisa mendistribusikan ruang kosong yang tersisa ketika item flex dalam satu baris tersebut tidak flexsibel atau meskipun flexsibel tapi sudah mencapai batas ukuran maksimum.

* Align-items

Align-items mendefinisikan bagaimana item-item pada container flex tersebut diletakkan sepanjang garis tegak lurus pada sumbu utama (cross-axis). Ini sama halnya dengan justify-content tapi peletakkannya saja yang berbeda.

* Align-content

Align-content digunakan untuk mensejajarkan garis flex container ketika ada ruang kosong secara garis tegak lurus pada sumbu utama (cross-axis). Sama halnya dengan justify-content yang mana mensejajarkan individu items pada main axis. Harap diperhatikan: Properti ini tidak dapat diaplikasikan jika hanya terdapat satu flex item.

 

 

Subscribe & Dapatkan Info Lainnya

WEBZID DEVELOPER

Leave a Reply

Your email address will not be published. Required fields are marked *

Berita Terkait