CSSMateri CourseNusantech Academy

Modul 3-11 CSS Flexbox

By 27 Mei 2020 Juni 3rd, 2020 No Comments

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.

Screenshot from 2020-05-21 18-30-37

Elemen Container dari Flexbox disebut Flex Container dan Child dari Container nya disebut Flex Item. 

untitled

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:

Screenshot from 2020-05-22 08-30-55
  • row-reverse

Kode CSS:

.container {
        display: flex;
        background-color: red;
        flex-direction: row-reverse;
}

Hasil:

Screenshot from 2020-05-22 08-06-29
  • column

Kode CSS:

.container {
        display: flex;
        background-color: red;
        flex-direction: column;
}

Hasil:

Screenshot from 2020-05-22 08-05-20
  • column-reverse

Kode CSS:

.container {
        display: flex;
        background-color: red;
        flex-direction: column-reverse;
}

Hasil:

Screenshot from 2020-05-22 08-06-00
  • 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:

Screenshot from 2020-05-22 15-15-56
  • 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:

Screenshot from 2020-05-22 15-48-30
  • 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;
}

Screenshot from 2020-05-22 16-33-13

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;

Screenshot from 2020-05-22 16-36-04
  • 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:

Screenshot from 2020-05-22 16-50-57
Screenshot from 2020-05-22 16-51-12
  • 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:

Screenshot from 2020-05-22 17-32-35
  • 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:

Screenshot from 2020-05-22 18-02-27

Kemudian jika kita menggunakan menambahkan order: 1;

Kode CSS:

.item1{
    background-color: yellow;
    padding: 20px;
    margin: 10px;
    border-radius: 5px;
order: 1;
}

Hasil:

Screenshot from 2020-05-22 18-00-29

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

Screenshot from 2020-05-22 19-45-43

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

Screenshot from 2020-05-22 19-43-19

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:

Screenshot from 2020-05-22 19-52-15

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!

Leave a Reply