Flex adalah salah satu nilai yang bisa diberikan pada properti display. Flex merupakan penyebutan singkat dari "flexible box". Kalian juga bisa menyebutnya flex-box. Flex bisa digunakan untuk menumpuk elemen di satu baris atau kolom.
Sebelum adanya flex, webdeveloper menggunakan tabel atau properti float untuk memisahkan item di sisi kiri dan kanan halaman. Itu bisa jadi cara yang merepotkan dan punya beberapa kekurangan. Kalau kalian menggunakan flex-box, kalian bisa meletakkan elemen HTML di tengah halaman selain di kiri dan kanan.
Flex-box membutuhkan satu elemen HTML sebagai kontainer untuk menampung elemen-elemen HTML yang akan disusun. Kontainer tersebut harus menggunakan display dengan nilai flex. Kalian bisa menggunakan hampir semua elemen HTML sebagai item di dalam flex-box. Elemen HTML yang umum untuk digunakan dalam flex-box adalah div yang berisi elemen-elemen lain di dalamnya. Saat kalian menggunakan display bernilai flex kaluan bisa menggunakan properti-properti di bawah ini..
- Align-content : Mengatur perataan posisi elemen semua HTML dalam flex-box berdasarkan cross-axis.
- Align-items : Mengatur perataan posisi elemen semua item flex-box yang ada dalam satu barisan.
- Align-self : Mengatur perataan posisi salah satu elemen HTML berdasarkan axis yang bersilangan dengan axis utama.
- Flex : versi pendek dari flex-direction dan flex-wrap.
- Flex-basis : Ukuran awal item di dalam flex.
- Flex-direction : mengatur arah susunan elemen HTML berdasarkan x-axis atau y-axis. Nilainya bisa berupa column, column-reverse, row-reverse, atau row.
- Flex-flow : Versi pendek dari flex-basis, flex-shrink, dan flex-grow
- Flex-grow : Batas perbesaran item.
- Flex-shrink : Batas pengecilan ukuran item.
- Flex-wrap : Menentukan apakah elemen HTML akan dipaksakan di dalam 1 barisan, atau dijadikan beberapa baris jika ukuran kontainer tidak cukup.
- Justify-content : Mengatur perataan dan penempatan posisi semua item flex-box dalam satu barisan berdasarkan axis-utama.
Flex-direction dan Flex-wrap
Flex-direction dengan nilai row akan menyusun item di dalam flex ke arah samping. Jika satu barisan kurang, item akan dipindahkan ke "baris berikutnya".
Nilai "column" pada flex-direction akan membuat item disusun berjajar ke bawah. Jika satu barisan kurang, maka item akan dimasukkan ke "kolom berikutnya".
Ringkasnya, berikut ini adalah nilai-nilai yang bisa kalian berikan pada flex-direction.
- column : Item dalam satu barisan disusun dari atas ke bawah. Barisan akan membentuk kelompok kolom / column
- column-reverse : Item dalam satu barisan disusun dari bawah ke atas. Barisan akan membentuk kelompok kolom.
- row : Item dalam satu barisan disusun dari kiri ke kanan. Barisan akan membentuk kelompok baris / row.
- row-reverse : Item dalam satu barisan disusun dari kanan ke kiri. Barisan akan membentuk kelompok baris.
Selanjutnya, kita akan coba terapkan properti tersebut dalam kode HTML.
<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
<style>
*{
box-sizing : border-box;
}
section{
display : flex;
flex-wrap : wrap;
}
.kontainer_baris div {
color : red;
background : yellow;
border : solid 2px gold;
width : 48%;
margin : 1%;
}
.kontainer_baris {
height : 50%;
width : 100%;
flex-direction : row;
}
.kontainer_kolom div {
color : red;
background : gold;
border : solid 2px brown;
height : 45%;
margin : 1%;
}
.kontainer_kolom {
height : 50%;
width : 100%;
flex-direction : column;
}
</style>
</HEAD>
<BODY>
<section class="kontainer_baris">
<div>
item1 flex row
</div>
<div>
item2 flex row
</div>
<div>
item3 flex column
</div>
</section>
<section class="kontainer_kolom">
<div>
item1 flex column
</div>
<div>
item2 flex column
</div>
<div>
item3 flex column
</div>
</section>
</BODY>
</HTML>Contoh di atas menggunakan column dan row sebagai nilai properti direction. Kalau kalian menggunakan column-reverse dan row-reverse, maka posisi item di dalam flex akan terbalik. Supaya lebih jelas, kalian bisa mencobanya sendiri dengan mengubah nilai properti direction menjadi row-reverse dan column-reverse.
Flex-box hanya akan terdiri dari dari satu baris jika diberi nilai no-wrap pada properti flex-wrap. Properti flex-wrap pada contoh di atas menggunakan wrap sebagai nilai flex-wrap. Karena satu barisan hanya cukup untuk diisi dua kotak, maka kotak ke tiga di letakkan pada barisan berikutnya.
Nilai no-wrap pada properti flex-wrap membuat item pada flex dipaksakan ke satu baris. Ini berbeda dengan wrap yang akan memindahkan satu item ke barisan berikutnya jika satu barisan tidak cukup.
<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
<style>
*{
box-sizing : border-box;
}
section{
display : flex;
flex-wrap : no-wrap;
}
.kontainer_baris div {
color : red;
background : yellow;
border : solid 2px gold;
width : 48%;
margin : 1%;
}
.kontainer_baris {
height : 50%;
width : 100%;
flex-direction : row-reverse;
}
.kontainer_kolom div {
color : red;
background : gold;
border : solid 2px brown;
height : 45%;
margin : 1%;
}
.kontainer_kolom {
height : 50%;
width : 100%;
flex-direction : column-reverse;
}
</style>
</HEAD>
<BODY>
<section class="kontainer_baris">
<div>
item1 flex row
</div>
<div>
item2 flex row
</div>
<div>
item3 flex column
</div>
</section>
<section class="kontainer_kolom">
<div>
item1 flex column
</div>
<div>
item2 flex column
</div>
<div>
item3 flex column
</div>
</section>
</BODY>
</HTML>
Selain wrap dan no-wrap, kalian juga bisa menggunakan wrap-reverse. wrap-reverse hampir sama dengan wrap, hanya arahnya saja yang berbeda.
Flex-flow
Properti flex-direction dan flex-wrap bisa dipersingkat penulisannya dengan flex-flow. Pola penulisan Flex-flow adalah seperti di bawah ini.
- Flex-flow : Nilai_flex-direction Nilai_flex-wrap
Contoh kode HTML-nya bisa kalian lihat di bawah ini.
<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
<style>
*{
box-sizing : border-box;
}
.kontainer{
display : flex;
flex-flow : column wrap;
height : 50%;
width : 100%;
background : yellow;
}
.kontainer div {
color : red;
background : lime;
border : solid 2px gold;
width : auto;
height : 30% ;
margin : 1%;
}
</style>
</HEAD>
<BODY>
<div class="kontainer">
<div>
item1
</div>
<div>
item2
</div>
<div>
item3
</div>
<div>
item4
</div>
</section>
</BODY>
</HTML>
Ukuran Item di dalam Flex-box
Flex-box bisa membuat ukuran item-item di dalamnya berubah secara fleksibel sesuai dengan ukuran kontainernya. Beberapa properti yang bisa kalian gunakan untuk membuat ukuran menjadi fleksibel adalah flex-basis, flex-shrink, dan flex-grow. Kegunaan masing-masing properti tersebut bisa kalian lihat di bawah ini.
- Flex-basis : ukuran awal dari item flexbox.
- Flex-shrink : Seberapa jauh ukuran item bisa diperkecil jika ruang yang tersedia kurang.Perubahan flex-shrink ditentukan berdasarkan ukuran item. Nilainya bisa antara 0 hingga 1.
- Flex-grow : Seberapa jauh ukuran item jika ruang masih ada ruang yang tersedia. Perubahan flex grow ditentukan berdasarkan berapa banyak ruang yang tersisa. Nilainya bisa antara 0 hingga 1. Kalian bisa juga menggunakan nilai di atasnya, walaupun 1 sudah cukup.
Ketiga properti tersebut bisa kalian persingkat penulisannya dengan properti flex. Pola penulisannya bisa kalian lihat di bawah ini.
- Flex : nilai_flex-shrink nilai_flex-grow nilai_flex-basis
<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
<style>
*{
box-sizing : border-box;
}
.kontainer{
display : flex;
flex-flow : row no-wrap;
gap : 1px;
height : 30%;
width : 100%;
background : yellow;
padding : 4px;
margin:2px;
overflow: auto;
}
.kontainer div {
color : red;
background : lime;
border : solid 2px gold;
width : auto;
height : 100% ;
flex-basis : 100px;
flex-grow : 0.3;
flex-shrink : 0.1;
}
</style>
</HEAD>
<BODY>
<section class="kontainer">
<div>
item1
</div>
<div>
item2
</div>
</section>
<section class="kontainer">
<div>
item1
</div>
<div>
item2
</div>
<div>
item3
</div>
</section>
<div class="kontainer">
<div>
item1
</div>
<div>
item2
</div>
<div>
item3
</div>
<div>
item4
</div>
</section>
</BODY>
</HTML>
Kode CSS dalam tag style bisa juga kalian ubah seperti di bawah ini. Saya hanya menyatukan properti flex-basis, flex-shrink, dan flex-grow dalam properti flex. Hasilnya sama saja dengan kode CSS di atas.
*{
box-sizing : border-box;
}
.kontainer{
display : flex;
flex-flow : row no-wrap;
gap : 1px;
height : 30%;
width : 100%;
background : yellow;
padding : 4px;
margin:2px;
overflow: auto;
}
.kontainer div {
color : red;
background : lime;
border : solid 2px gold;
width : auto;
height : 100% ;
flex :0.1 0.3 100px;
}Justify-content
Justify content digunakan untuk menentukan penempatan elemen flex-box di dalam "main-axis". Nilai-nilai yang bisa kalian berikan pada justify-content bisa kalian lihat di bawah ini.
- Flex-start
- Center
- Flex-end
- Space-between
- Space-evenly
- Space-around
Contoh penggunaan dari justify-content bisa kalian lihat di bawah ini.
<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
<style>
*{
box-sizing : border-box;
}
section{
display : flex;
flex-flow : row wrap;
height : 15%;
width : 100%;
background : yellow;
padding : 1%;
gap : 1%;
}
section div{
background : green;
width : 20%;
}
</style>
</HEAD>
<BODY>
<section style="justify-content:flex-start">
<div>
X
</div>
<div>
Flex-start
</div>
<div>
X
</div>
</section>
<section style="justify-content:center">
<div>
X
</div>
<div>
Center
</div>
<div>
X
</div>
</section>
<section style="justify-content:flex-end">
<div>
X
</div>
<div>
Flex-end
</div>
<div>
X
</div>
</section>
<section style="justify-content:space-evenly">
<div>
X
</div>
<div>
Space-evenly
</div>
<div>
X
</div>
</section>
<section style="justify-content:space-around">
<div>
X
</div>
<div>
Space-around
</div>
<div>
X
</div>
</section>
<section style="justify-content:space-between">
<div>
X
</div>
<div>
Space-between
</div>
<div>
X
</div>
</section>
</BODY>
</HTML>
Align-Content
Align-content digunakan untuk menentukan penempatan elemen flex-box di dalam "cross-axis". Nilai-nilai untuk justify-content bisa kalian lihat di bawah ini.
- Flex-start
- Flex-end
- Center
- Space-around
- Space-between
- Stretch
Contoh kode HTML-nya bisa kalian lihat di bawah ini.
<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
<style>
*{
box-sizing : border-box;
}
section{
display : flex;
flex-flow : row wrap;
height : 15%;
width : 100%;
background : yellow;
border: solid 2px blue;
margin : 4px;
padding : 1%;
gap : 1%;
}
section div{
background : green;
width : 20%;
}
</style>
</HEAD>
<BODY>
<section style="align-content:flex-start">
<div>
X
</div>
<div>
Flex-start
</div>
<div>
X
</div>
</section>
<section style="align-content:center">
<div>
X
</div>
<div>
Center
</div>
<div>
X
</div>
</section>
<section style="align-content:flex-end">
<div>
X
</div>
<div>
Flex-end
</div>
<div>
X
</div>
</section>
<section style="align-content:stretch">
<div>
X
</div>
<div>
Stretch
</div>
<div>
X
</div>
</section>
<section style="align-content:space-around">
<div>
X
</div>
<div>
Space-around
</div>
<div>
X
</div>
</section>
<section style="align-content:space-between">
<div>
X
</div>
<div>
Space-between
</div>
<div>
X
</div>
</section>
</BODY>
</HTML>
Align-Items
Align-items digunakan untuk menentukan penempatan elemen flex-box di dalam satu barisan, terutama jika ada item yang tingginya berbeda. Nilai-nilai untuk justify-item bisa kalian lihat di bawah ini.
- Flex-start : Item dalam flexbox diratakan berdasarkan bagian bawah masing-masing item.
- Flex-end : Item dalam flexbox diratakan berdasarkan bagian bawah masing-masing item.
- Center : Item dalam flexbox diratakan berdasarkan bagian tengah masing-masing item.
- Stretch : Item dalam flex-box disamakan panjangnya jika nilai height-nya auto.
- Baseline : Item dalam flex-box diratakan berdasarkan teksnya.
Contoh kode HTML-nya bisa kalian lihat di bawah ini.
<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
<style>
*{
box-sizing : border-box;
}
section{
display : flex;
flex-flow : row wrap;
height : 16%;
width : 100%;
background : yellow;
border: solid 2px blue;
margin : 4px;
padding : 1%;
gap : 1%;
}
section div{
background : green;
width : 32%;
height : 75%;
Vertical-align:middle;
}
</style>
</HEAD>
<BODY>
<section style="align-items:flex-start">
<div>
X
</div>
<div>
<p>Flex-start</p>
</div>
<div>
X
</div>
</section>
<section style="align-items:center">
<div>
X
</div>
<div>
<p>Center</p>
</div>
<div>
X
</div>
</section>
<section style="align-items:flex-end">
<div>
X
</div>
<div>
<p>Flex-end</p>
</div>
<div>
X
</div>
</section>
<section style="align-items:stretch">
<div>
X
</div>
<div>
<p>Stretch</p>
</div>
<div>
X
</div>
</section>
<section style="align-items:baseline">
<div >
X
</div>
<div>
<p>Baseline</p>
</div>
<div>
X
</div>
</section>
<section style="align-content:flex-end;align-item:center;">
<div style="height:60%;">
X
</div>
<div style="height:70%;">
Align-content+align-items
</div>
<div style="height:50%">
X
</div>
</section>
</BODY>
</HTML>
Jika hanya ada satu baris, beberapa nilai dari align-content dan align-item membuat hasilnya terlihat sama karena ada beberapa nilai yang memang sama. Bedanya baru akan terlihat kalau kalian menggunakannya bersamaan seperti pada "section" yang terakhir dalam contoh di atas.
Align-Self
Align-self kegunaannya hampir sama dengan align-items. Nilai-nilai yang bisa diberikan pun sama. Bedanya, ini hanya berpengaruh untuk satu item saja. Kalian tidak menggunakannya sebagai properti dari parent. Align-self digunakan pada item flex-box.
<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
<style>
*{
box-sizing : border-box;
}
section{
display : flex;
flex-flow : row wrap;
height : 50%;
width : 100%;
background : yellow;
border: solid 2px blue;
margin : 4px;
padding : 1%;
gap : 1%;
}
section div{
background : green;
width : 32%;
height : 75%;
}
</style>
</HEAD>
<BODY>
<section style="align-items:flex-end">
<div>
X
</div>
<div style="align-self:center">
Tengah
</div>
<div>
X
</div>
</section>
<section style="align-items:center">
<div>
X
</div>
<div style="align-self:flex-start">
Atas
</div>
<div>
X
</div>
</section>
</BODY>
</HTML>