Belajar CSS - Memahami Flexbox Layout CSS Part1 - Awonapa

Assalamualaikum , Halo Teman-teman, Selamat Datang Kembali di Blog Awonapa JR. Pada kesempatan ini, kita akan membahas mengenai Flexbox Layout pada CSS. Pada artikel sebelumnya sudah cukup banyak beberapa materi Belajar CSS yang sudah kita bahas, Jika teman-teman ingin membaca mengulang serta memahami kembali teman-teman bisa melihat link ini

Tutorial Belajar CSS Dasar Untuk Pemula

Flexbox Layout CSS

Baik , Teman-teman beberapa Pembahasan Yang akan Kita Pelajari berikut ini

Penjelasan Flexbox CSS
Latihan Flexbox

Flexbox CSS

Flexbox adalah sebuah fitur yang terdapat di CSS3, Bisa dibilang sebuah metode layouting update di CSS 3, jika pada sebelumnya kita Mengenal Metode Block, Inline dan Table serta Float untuk layouting, Tapi perlu diketahui bahwa beberapa metode diatas, kurang di anjurkan apabila digunakan untuk layouting, melainkan untuk mengatur text serta gambar pada Sebuah Website.

Namun teman-teman boleh membaca nya kembali agar menemukan sebuah perbedaan.

Belajar CSS - Mengenal Float Pada CSS

Belajar CSS - Display Inline, block dan inline-block pada CSS

Flexible Box atau biasa kita sebut Flexbox ini akan mengatur ukuran dari childnya secara otomatis, dan mampu beradaptasi dengan ukuran containernya. Permasalahan-permasalahan yang sebelumnya bisa diselesaikan dengan metode seperti float, absolute, dan transform bisa diselesaikan secara mudah dengan Flexbox.

Dan Oleh karena itu kita akan mencoba Memahami Flexbox dari Dasar nya terlebih dahulu.

Latihan Flexbox

Sebelum teman-teman mencoba untuk belajar Flexbox, maka kita harus mempersiapkan syntak html dan css dulu.

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
 <head>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="style.css" />
  <title>Belajar CSS Flexbox</title>
 </head>
 <body>
  <div class="container">
   <div class="box box1">1</div>
   <div class="box box2">2</div>
   <div class="box box3">3</div>
   <div class="box box4">4</div>
   <div class="box box5">5</div>
   <div class="box box6">6</div>
   <div class="box box7">7</div>
   <div class="box box8">8</div>
   <div class="box box9">9</div>
   <div class="box box10">10</div>
  </div>
 </body>
</html>

CSS

* {
 margin: 0;
}
.container {
 background: #ecf0f1;
}
.box {
 padding: 30px;
 color: white;
 font-size: 1.5em;
 text-align: center;
 width: 200px;
}
.box1 {
 background-color: #1dd0ad;
}
.box2 {
 background-color: #2fcc72;
}
.box3 {
 background-color: #3498db;
}
.box4 {
 background-color: #9b59b6;
}
.box5 {
 background-color: #34495e;
}
.box6 {
 background-color: #f1c40f;
}
.box7 {
 background-color: #e67e22;
}
.box8 {
 background-color: #e74c3c;
}
.box9 {
 background-color: #95a5a6;
}
.box10 {
 background-color: #7f8c8d;
}

Jika sudah silahkan teman-teman save sesuai dengan syntak diatas. Lalu run di browser teman-teman. Baik, jika sudah berhasil, mari kita coba untuk memahami lebih lanjut tentang Flexbox Dasar CSS.

1. Flexbox Flex Container

Untuk yang pertama ini, kita akan mengatur property display menjadi flex pada .container yang sudah kita buat tadi.

.container {
 background: #ecf0f1;
 display: flex;
}

Property diatas, akan merubah layout model container menjadi flexbox dan merubah element yang ada didalamnya menjadi flex-item.
Hasil dari codingan yang sudah ditambahkan dengan display: flex; adalah seperti berikut ini:

Seperti yang telah saya jelaskan pada pembukaan artikel, bahwa flexbox memiliki kemampuan untuk mengatur dan beradaptasi menyesuaikan width flex-item secara otomatis. Dalam kasus ini walaupun kita sudah menentukan width dari box menjadi 200px, tapi width tersebut akan dioverride oleh flexbox agar ukurannya sama rata.

2. Flexbox Flex Direction

Secara Default, ketika kita menerapkan layout mode flex pada Direction, maka elemen-elemen terdapat 2 jenis, yaitu Flexbox Flex Direction Row dan Flexbox Flex Direction Column,

Pasti teman-teman sudah paham mengenai row dan column, seperti pada tabel teman-teman.

berikut ini adalah contoh dari Column dan Row.

column and row

Nah baik teman-teman, langsung saja mari kita coba untuk menggunakan Flexbox Flex Direction Row.

Oiya di dalam Flexbox Flex Direction Row, terdapat 2 nilai yaitu row dan row-reverse

Penggunaan Pada flex-direction row

.container {
 background: #ecf0f1;
 display: flex;
 flex-direction: row;
}

Penggunaan Pada flex-direction row-reverse

.container {
 background: #ecf0f1;
 display: flex;
 flex-direction: row-reverse;
}

Dari syntak diatas, hasil yang akan ditampilkan di browser adalah seperti ini

property Penggunaan flex-direction row dan row-reverse

Jadi perbedaan yang terbentuk dari row-reverse adalah kebalikan dari row, yaitu angka dimulai dari angka 10 bukan angka 1.

Selanjutnya mari kita coba untuk menggunakan Flexbox Flex Direction Column.

Sama juga dengan Flexbox Flex Direction Row, terdapat 2 nilai yaitu column dan column-reverse

Penggunaan Pada flex-direction column

.container {
 background: #ecf0f1;
 display: flex;
 flex-direction: column;
}

Penggunaan Pada flex-direction column-reverse

.container {
 background: #ecf0f1;
 display: flex;
 flex-direction: column-reverse;
}

Dari syntak diatas, hasil yang akan ditampilkan di browser adalah seperti ini

Pada sebelah kiri kita menggunakan column dan sebelah kanan menggunakan column-reverse.

3. Flex Wrap

Pada bagian sebelumnya, kita sudah mengatur width dari box nya sebesar 200px, namun karena kita menggunakan flexbox pada container nya, maka otomatis width 200px itu akan berubah . Nah dengan menggunakan Flex Wrap, kita akan tetap melihat width nya sebesar 200px. Mari kita coba teman-teman.

Penggunaan Pada flex-wrap: wrap;

.container {
 background: #ecf0f1;
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
}

Penggunaan Pada flex-wrap: wrap-reverse;

.container1 {
 background: #ecf0f1;
 display: flex;
 flex-direction: row;
 flex-wrap: wrap-reverse;
}

Maka hasil yang akan ditampilkan adalah berikut ini.

Baik teman-teman, kalian bisa mencoba nya pada browser kalian, mohon maaf jika terdapat kesalahan.

Sekilas Rangkuman

RANGKUMAN
Property	Value
Display	flex, inline-flex
flex-direction	row(default), row-reverse, column, column-reverse
flex-wrap	nowrap, wrap, stretch

Mungkin cukup untuk Memahami Flexbox Layout CSS Part1 untuk Part2 nya akan kita lanjutkan nanti.

Terimakasih sudah berkunjung
Salam Semangat!!

Awonapa - Website dan Blogging

Belajar CSS - Memahami Flexbox Layout CSS Part1