Hai, apa kabar teman-teman. Kita kembali lagi dalam course HTML & CSS Nusantech Academy. Sebelumnya kita sudah mengenal apa itu Overflow. Dan sekarang kita akan melanjutkan perjalanan kita membahas kelanjutan dari materi Display & Positioning, yaitu tentang Flexbox. Semangat!
Apa itu Flexbox?
Flexbox merupakan konsep pengaturan layout yang mengatur ukuran elemen Child dari suatu Container untuk beradaptasi dengan Parent/Container-nya. Flexbox umumnya digunakan pada sebuah elemen yang tidak pasti ukurannya atau berubah-ubah(dinamis). Hal ini sangat bermanfaat untuk membuat tampilan website responsif. Sangat penting bagi teman-teman untuk mengetahui konsep pengaturan layout menggunakan Flexbox.
Konsep Dasar
Flexbox terdiri dari dua penyusun yakni Container dan Child, kedua unsur ini harus ada. Container berfungsi menjadi wadah yang menentukan bagaimana elemen child akan dirender.
Elemen Container dari Flexbox disebut Flex Container dan Child dari Container nya disebut Flex Item.
Main Axis merupakan sumbu yang menentukan Flex Item diletakkan. Garis yang berpotongan tegak lurus dengan Main Axis disebut Cross Axis. Secara default posisi Main Axis lurus horizontal, sedangkan arah/posisi Cross Axis ditentukan oleh Main Axis. Arah ini dapat ditentukan menggunakan Property flex-direction. Width/height flex item ditentukan oleh Main Size atau Cross Size, tergantung arah Main Axis. Posisi bawaan elemen berawal dari titik start dan diakhiri pada titik end.
Flex Container
Flex Container sebagai wadah dari item-item kita, memiliki banyak Property yang dapat diaplikasikan sesuai keinginan
- display
Seperti pada penjelasan tentang materi Display & Positiong yang lalu, Property ini memiliki nilai yang menentukan apakah sebuah elemen akan berbentuk block atau inline. Property ini pula yang digunakan jika suatu elemen akan memakai konsep Flexbox, jika iya maka Property ini harus menggunakan nilai Display: flex atau inline-flex
Kode CSS:
.container {
display: flex; /* atau inline-flex */
}- flex-direction
Dengan Property ini kita bisa menentukan arah Main Axis Flex Container dimana elemen flex-item kita dirender. Ada 4 nilai yang ada pada Property ini, yakni row, row-reverse, column, dan column-reverse.
Contoh
Kode HTML:
<section class="flex-direction">
<div class="yellow"> item 1 </div>
<div class="yellow"> item 2 </div>
<div class="yellow"> item 3 </div>
</section>Kode CSS:
.container {
display: flex;
background-color: red;
}
.item {
background-color: yellow;
padding: 20px;
margin: 10px;
border-radius: 5px;
}- row
Kode CSS:
.container {
display: flex;
background-color: red;
flex-direction: row; /* nilai bawaan */
}Hasil:
- row-reverse
Kode CSS:
.container {
display: flex;
background-color: red;
flex-direction: row-reverse;
}Hasil:
- column
Kode CSS:
.container {
display: flex;
background-color: red;
flex-direction: column;
}Hasil:
- column-reverse
Kode CSS:
.container {
display: flex;
background-color: red;
flex-direction: column-reverse;
}Hasil:
- justify-content
Justify-content digunakan untuk mengatur alignment flex-item didalam Container di sepanjang main axis. Berikut nilai-nilai dari Property ini:
Kode CSS :
.container {
display: flex;
flex-direction: row
justify-content: flex-start | flex-end | center | space-around | space-between
}Hasil:
- align-item
Jika justify-content mengatur alignment dengan basis Main Axis, maka align-item sebaliknya, menggunakan Cross Axis. Property ini juga sering digunakan bersama dengan justify-content
Kode CSS:
.container {
display: flex;
align-items: stretch | flex-start | flex-end | center | baseline;
}Hasil:
- align-content
Kita bisa menggunakan align-content jika kita ingin mengatur container dengan lebih dari satu baris flex-item (multiline). contoh dibawah ini kita juga gunakan flex-wrap: wrap(nanti kita bahas di poin selanjutnya).
Kode CSS:
.container {
display: flex;
flex-wrap: wrap;
align-content: stretch | flex-start | flex-end | center | space-between | space-around;
}
Hasil:
Dikarenakan contoh di atas tidak mengikutsertakan Property Single Line seperti align-items, maka nilai yang dipakai untuk itu adalah Stretch (default). misal jika diberi align-items: center;
- flex-wrap
Nah, pada poin sebelumnya kita sudah pakai flex-wrap: wrap tuh. Gunanya hampir mirip dengan property Overflow sebelumnya, namun Property ini membuat flex-item yang keluar dari batas flex-containernya dipindah ke baris baru.
Kode CSS:
.container {
display: flex;
flex-wrap: nowrap | wrap | wrap-reverse;
}Hasil:
- flex-flow
Flex-flow merupakan shorthand dari Property flex-direction dan flex-wrap, dengan nilai default flex-flow: row nowrap;
Contoh
Kode CSS:
.container {
display: flex;
flex-flow: column wrap-reverse
}Flex Item
Flex item juga memiliki Property khusus yang dapat digunakan berdampingan dengan flex container untuk lebih spesifik dalam menggunakan Flexbox
- align-self
Kalau Container menggunakan align-items untuk mengatur semua flex-item, maka untuk mengatur satu flex-item kita bisa menggunakan align-self.
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}Hasil:
- Order
Seperti yang sudah kita ketahui urutan dalam menampilkan elemen itu tergantung dari source code (dari atas ke bawah). Tapi dengan Property order kita bisa menentukan urutan sebuah flex item tertentu. Nilai default dari order adalah 0
Kode HTML:
<section class="container">
<div class="item1"> 1 </div>
<div class="item2"> 2 </div>
<div class="item3"> 3 </div>
<div class="item4"> 4 </div>
<div class="item5"> 5 </div>
</section>
Kode CSS
.item1{
background-color: yellow;
padding: 20px;
margin: 10px;
border-radius: 5px;
}Hasil:
Kemudian jika kita menggunakan menambahkan order: 1;
Kode CSS:
.item1{
background-color: yellow;
padding: 20px;
margin: 10px;
border-radius: 5px;
order: 1;
}Hasil:
Konsep dari order ini mirip dengan z-index, semakin tinggi nilai order, maka flex item tersebut akan ditampilkan pada urutan terakhir di dalam flex-container.
- flex
Property flex digunakan untuk mengatur seberapa flex-item akan diberi ruang sisa. Nilai default dari flex adalah 0.
Contoh:
Misal kita punya elemen berikut
Let see jika kita tambahkan Property flex pada salah satu flex-item di atas
.item1 {
background-color: yellow;
padding: 20px;
margin: 10px;
flex: 1;
}Hasil
Dapat kita ketahui elemen dengan item1 memiliki nilai flex tertinggi yakni 1. sehingga flex-item ini mengambil alih sisa space terbanyak dari container nya
Mari kita coba lagi. Kita tambahkan flex: 2 pada item2
Hasil:
Dari percobaan diatas dapat kita simpulkan bahwa flex membuat elemen flex-item kita mampu menentukan ukuran dengan skala yang ditentukan.
Flex sebenarnya adalah shorthand dari tiga Property berikut:
- flex-grow
Flex-grow yang mengatur apakah atau seberapa luas elemen kita bertambah mengambil space sisa dari Container nya.
- flex-shrink
Kebalikan dari flex-grow, flex-shrink berguna untuk membuat flex-item dapat menyusut.
- flex-basis
fungsi dari flex-basis yakni memberikan nilai initial/awal dari flex-item sekaligus menjadi batas bahwa sebuah flex-item tidak dapat mengecil dari ukuran yang diberikan. flex-basis juga bisa dikatakan seperti min-width dari flex-item.
Menggunakan shorthand flex lebih disarankan dari pada menggunakan ketika property tersebut.
Penutup
Flexbox juga sering kali disandingkan dengan konsep Grid. Kedua konsep ini memiliki banyak kesamaan dan juga sering kali digunakan bersama untuk membangun layout website. Untuk tahu lebih lanjut teman-teman bisa mengikuti pembahasan berikutnya. Dan jika teman-teman ingin belajar sambil bermain tentang flexbox disini.
Jika teman-teman punya pertanyaan atau saran bisa disampaikan pada kolom komentar. Tetap semangat. See you next time!
