Pemrograman Web #5 - CSS Flex - Catatan Informatika

Flexbox

Flexbox merupakan mode layout terbaru yang menjadi fitur dari CSS3 Sebelumnya kita mengenal mode block, inline, table dan juga melibatkan floating untuk layouting. Float sebenernya digunakan untuk memposisikan gambar/text.

Flexible box atau lebih dikenal dengan flexbox ini dapat mengatur ukuran child secara otomatis, dan mampu beradaptasi dengan ukuran kontainernya. Permasalahan-permasalahan yang sebelumnya diselesaikan dengan metode float, absolute dan transform, dapat diselesaikan secara mudah dengan menggunakan flexbox.

Flexbox Element

Untuk memulai menggunakan flexbox model, maka kita perlu mendefinisikan sebuah flex container. Di dalam flex container dabat diisi oleh beberapa flex item.

Flex container adalah elemen yang berwarna abu-abu, dan flex item adalah elemen yang berwarna pink. Untuk membuat flex container, maka kita tambahkan property:
display: flex;

Contoh :

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
    .container {
      background-color: grey;
      display: flex;
    }
    .container > .box {
      width: 100px;
      height: 100px;
      margin: 10px;
      background-color: lightblue
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
    <div class="box">Box 4</div>
    <div class="box">Box 5</div>
  </div>
</body>
</html>

Ketika width dari flex item sudah didefinisikan dan ketika di implementasikan widthnya tidak cukup maka akan otomatis di overwrite.

Flexbox direction

Secara default ketika menerapkan layout flex model pada container, maka elemen-elemen di dalamnya akan berlaku sebagai kolom, hal ini karna secara default.

Untuk mengatur orientasi/arah darai flex item dapat dilakukan dengan menambahkan property flex-direction, kemudian value nya dapat diisi dengan row atau column, pada flex containernya.
Tambahkan Property : flex-direction: column | row;

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
    .container {
      background-color: grey;
      display: flex;
      flex-direction: column
    }
    .container > .box {
      width: 100px;
      height: 100px;
      margin: 10px;
      background-color: lightblue
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
    <div class="box">Box 4</div>
    <div class="box">Box 5</div>
  </div>
</body>
</html>

Flexbox Axis

Dalam flexbox dikenal 2 sumbu/axis, yakni main axis dan cross axis.

Ketika flex-direction diberi value row, maka main axis nya dari kiri ke kanan dan cross axis nya dari atas ke bawah.

Ketika flex-direction diberi value column, maka main axis nya dari atas ke bawah dan cross axis nya kiri ke kanan.

Untuk mengubah arah dari main axis dan cross axis maka dapat dilakukan dengan mengubah nilai dari flex-direction: row-reverse atau flex-direction: column-reverse

Flex Wrap

Property flex-wrap digunakan untuk mengatur tampilan sesuai dengan width yang telah ditentukan oleh flex item. Ketika lebih dari ukuran container nya, maka boxnya akan turun ke bawah. Flex-wrap secara default berisi no-wrap.
flex-wrap: wrap;

Pengaturan Flex Item

Mengurutkan Flex Item

Untuk mengurutkan tataletak dari flex item, bisa dilakukan dengan mengatur property order dan value nya diisi angka boleh positive boleh negative.

<style type="text/css">
  .container {
    background-color: grey;
    display: flex;
  }
  .container > .box {
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color: lightblue
  }
  .box3 {
    order: 1
  }
</style>

Meratakan Flex Item

Untuk meratakan flex item berdasarkan main axis bias dilakukan dengan menggunakan property justify-content pada bagian flex container nya. Adapun value nya ada beberapa opsi: flex-start | flex-end | center|space-between |space-arround

Property	Keterangan
flex-start	Meratakan flex item ke sebelah kiri
flex-end	Meratakan flex item ke sebelah kanan
center	Meratakan flex item ke bagian tengah
space-between	Meratakan ruang kosong antara flex item yang satu dengan yang lain
space-around	Sama seperti space-between, tapi dengan membagi kekosongan container secara merata ke flex item nya

Property	Keterangan
stretch	Meratakan flex item sesuai tinggi container
flex-start	Meratakan flex item ke sebelah atas
flex-end	Meratakan flex item ke sebelah bawah
center	Meratakan flex item ke bagian tengah
baseline	Meratakan flex item berdasarkan posisi baseline text

Untuk meratakan flex item berdasarkan cross axis, jika flex item lebih dari 1 baris (multiline) bias dilakukan dengan menggunakan property align-content pada bagian flex container nya. Adapun value nya ada beberapa opsi: stretch | flex-start | flex-end | center|baseline | space-between |space-arround

Property	Keterangan
flex-start	Meratakan flex item ke sebelah kiri
flex-end	Meratakan flex item ke sebelah kanan
center	Meratakan flex item ke bagian tengah
space-between	Meratakan ruang kosong antara flex item yang satu dengan yang lain
space-around	Sama seperti space-between, tapi dengan membagi kekosongan container secara merata ke flex item nya

Rangkuman

Property untuk flex container

Property	Keterangan
display	flex \| inline-flex
flex-direction	row \| row-reserve \| column \|column-reserve
flex-wrap	nowrap \| wrap \| stretch
justify-content	flex-start \| flex-end \|center \|space-between \| space-around
align-items	stretch \| flex-start \| flex-end \|center \| baseline
align-content	stretch \| flex-start \| flex-end \|center \|space-between \| space-around

Pemrograman Web #5 - CSS Flex

Flexbox

Flexbox Element

Flexbox direction

Flexbox Axis

Flex Wrap

Pengaturan Flex Item

Mengurutkan Flex Item

Meratakan Flex Item

Rangkuman

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel