LEARN CSS : Display Property — Flexbox (2)
6. Flex
Flex (flexibel) adalah salah satu super power display dari CSS3. Memungkinkan untuk pengaturan layout, posisi dan tampilan dari suatu konten yang ukurannya belum diketahui atau bernilai dinamis. Oleh sebab itu, nilai ini dinamakan Flex diambil dari kata flexibel yang berarti mudah diatur, disesuaikan dan ditukar-tukar.
Flex sangat cocok digunakan untuk komponen sebuah aplikasi dan layout skala kecil. Tujuan utama penggunaan layout flex adalah untuk memberi kemampuan container agar dapat memanipulasi item-item (elemen) yang ada didalamnya, baik itu merubah tinggi dan lebar, urutan posisi elemen, dan spasi (jarak) diantara elemen tersebut.
Secara garis besar flex dibagi menjadi dua :
Flex Container
Pada bagian ini flex container bertindak sebagai parent. Terdapat beberapa nilai yang dapat diatur pada flex container, diantaranya :
a. display
Pengaturan display flex dilakukan pada container. Terdapat dua value display, yaitu flex (block) dan inline-flex (inline).
b. flex-direction
Digunakan untuk mengatur arah alur dari items yang ada pada container flex. Default valuenya row. Terdapat empat nilai :
c. flex-wrap
d. flex-flow
Flex-flow merupakan shorthand dari flex-direction dan flex-wrap properti.
flex-flow: <’flex-direction’> || <’flex-wrap’>
e. justify-content
Justify-content digunakan untuk mensejajarkan setiap items yang ada pada flex container, agar container 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.
Pengaturan justify-content berdasarkan pada sumbu-x atau pengaturan items secara horizontal.
- flex-start (default): item dimulai dari awal (kiri / kanan sesuai flex-direction)
- flex-end: item dimulai dari akhir (kiri / kanan sesuai flex-direction)
- centert: item berpusat ditengah-tengah di sepanjang garis container flex
- space-between: item merata dalam container; item pertama ada di garis awal, item terakhir di garis akhir
- space-around: item didistribusikan secara merata di dalam container flex dengan ruang yang sama di sekitar mereka.
- space-evenly: item didistribusikan sehingga jarak antara dua item (dan ruang ke tepi) sama.
f. align-items
Align-items hampir sama dengan konsep justify-content hanya saja pada align-items, item-item flex diatur berdasarkan sumbu-y atau sepanjang garis tegak-lurus atau secara vertikal.
- flex-start: margin tepi cross-start item ditempatkan pada garis cross-start (rata atas) container.
- flex-end: margin tepi cross-end dari item ditempatkan pada garis cross-end (rata bawah) container.
- center: item berpusat pada sumbu silang (ditengah) container.
- baseline: item sejajar seperti garis dasar text mereka sejajar.
- stretch (default): peregangan untuk mengisi kontainer (tetap mengutamakan nilai min-width / max-width)
g. align-content
Algin-content memadukan konsep align-items dan justify-content dimana digunakan untuk mensejajarkan garis flex container ketika ada ruang kosong secara garis tegak lurus pada sumbu-y. Antar items menggunakan konsep align items dan antar line menerapkan konsep justify-content.
- flex-start: baris dimulai dari awal container
- flex-end: baris dimulai dari akhir container
- center: baris yang diletakkan pada tengah container
- space-between: baris terdistribusi merata; Baris pertama ada di awal container sementara yang terakhir ada di bagian akhir
- space-around: baris merata didistribusikan dengan ruang yang sama di sekitar setiap baris
- stretch (default): baris peregangan untuk mengambil ruang yang tersisa
Property align-content tidak dapat diterapkan jika item-item flex terdiri hanya satu line.
Flex Items
Flex item merupakan item atau content yang ada dalam sebuah flex container maka dinamakan sebagai flex item. Ada beberapa hal yang dapat diatur dan disesuaikan pada suatu flex items.
a. order
Order digunakan untuk mengatur urutan dari flex-item, secara default nilai order adalah 1. Namun kita dapat menyesuaikan nilai tersebut sesuai dengan kebutuhan kita.
b. flex-grow
Flex-grow mendefinisikan kemampuan item flex untuk bertambah ukurannya jika memungkinkan ukuran pada container yang tersedia. Value dari flex-grow tidak memiliki satuan yaitu berupa integer yang berfungsi sebagai proposisi. Nilai ini akan menentukan jumlah ruang yang tersedia dalam wadah flex yang dapat diambil oleh item tersebut.
Default nilai flex-grow = 0;
Pada gambar tersebut, Value flex-grow untuk box 8 bernilai 1, box 1 bernilai 2 dan box lain sesuai dengan default. Sehingga box 8 mengambil ruang items satu kali lebih banyak dari yang lain dan box 1 mengambil ruang items sebanyak 2 kali lebih banyak.
Note: flex-grow hanya berlaku pada container flex dan tidak dapat digunakan pada nilai inline-flex.
c. flex-shrink
Kebalikan dari flex-grow, flex-shrink memiliki kemampuan untuk melakukan penyusutan/pengurangan ukuran item flex jika ukuran container flex tidak mencukupi.
Default flex-shrink: 1;
Dari contoh diatas dapat kita lihat bahwa box 1 dan box 2 mengalami pengurangan ukuran width. Hal ini dikarenakan pada box 1 diterapkan nilai flex-shrink sebanyak 3 dan box 2 bernilai 2. Dikarenakan lebar container flex tidak mencukupi untuk semua box sehingga ukuran box 1 dan box 2 secara langsung menyesuaikan diri mengurangi ukuran lebar karena nila flex-shrink telah diatur pada kedua item tersebut.
d. flex-basis
Flex-basis digunakan untuk mengatur ukuran lebar dari item flex bernilai sama dengan nilai width.
Default value flex-basis: auto;
e. flex
Flex merupakan shorthand dari flex-grow, flex-shrink dan flex-basis.
flex: none | [ <’flex-grow’> <’flex-shrink’>? || <’flex-basis’> ]
f. align-self
Align-self merupakan pengaturan tersendiri dari item flex dari nilai align-items yang diterapkan pada container flex. Value pada align-self sama dengan yang ada pada align-items. Namun ini akan lebih spesifik berakibat pada item flex tertentu saja.
align-self: auto | flex-start | flex-end | center | baseline | stretch;
note: penggunaan float, clear dan vertical-align tidak berlaku pada flex item.
