CSS Responsive Flexbox

Flexbox adalah layout model baru untuk membuat box model di CSS3. Sebelumnya, ada empat jenis layout mode:

• Inline untuk teks
• Block untuk section di website
• Table untuk data dua dimensi
• Positioned untuk posisi elemen yang spesifik

Flexbox singkatan dari flexible box, artinya kita bisa membuat kotak dengan ukuran yang fleksibel.

Perhatikan contoh diatas, yang atas tanpa flexbox sedangkan yang bawah dengan flexbox.

Paham kan apa yang akan kita bahas saat ini?

Syntax

Konsep logika dari flexbox ini adalah, kita membuat kotak container yang diberi display:flex.

Kemudian di dalam kotak tersebut akan otomatis ukurannya fleksibel.

<style>
.kotak_flex {
  display: flex;
  background-color: #5340ff;
}

.kotak_flex > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}
</style>
<div class="kotak_flex">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
</div>

Hasilnya:

flex-direction

Digunakan untuk menentukan arah dari kolom tersebut. Ada empat tipe flex-direction, yaitu:

• column, arahnya vertikal (1, 2, 3)
• column-reverse, arahnya vertikal dibalik (3, 2, 1)
• row, arahnya horizontal (1, 2, 3)
• row-reverse, arahnya horizontal dibalik (3, 2, 1)

.kotak_flex {
  display: flex;
  flex-direction: column;
  background-color: #5340ff;
}

flex-wrap

flex-wrap digunakan untuk mengatur jika konten itu melebihi box container. Ada tiga opsi value, yaitu:

• wrap, yaitu jika konten melebihi ukuran otomatis turun kebawah
• no-wrap, konten “dipaksa” untuk mengikuti ukuran box container
• wrap-reverse, yaitu wrap yang dibalik (3, 2, 1)

.flex-wrap {
  display: flex;
  flex-wrap: wrap;
  background-color: DodgerBlue;
}

Contoh flex wrap:

Contoh flex no-wrap:

Flex justify content

Untuk membuat isi box menjadi rata tengah, digunakan justify-content: center;

.flex-wrapcenter {
  display: flex;
  flex-wrap: wrap;
  background-color: #5340ff;
  justify-content: center;
}

Ada limat value dari justify-content, yaitu:

• center, box akan rata tengah dengan posisi margin sesuai yang diatur
• flex-start, box akan rata kiri (default)
• flex-end, box akan rata kanan
• space-around, posisi box ada di before, after dan between line
• space-between, jika ada 3 box maka akan diposisikan di paling kiri, tengah dan paling kanan

Properti align-content

Kalau justify mengatur konten secara horizontal, sedangkan align-content mengatur secara vertikal.

Ada enam value dari properti align-content, yaitu:

• flex-end, posisi box akan ditaruh di posisi paling bawah
• flex-start, posisi box ada di paling atas
• center, posisi ada di tengah-tengah container (secara vertikal)
• stretch, ukuran box akan dipaksa agar menutupi container
• space-between, box akan di taruh di atas, tengah, bawah
• space-around, box akan ditaruh di atas, tengah, bawah (tapi posisinya di tengah di setiap posisi)

.flex{
  display: flex;
  flex-wrap: wrap;
  background-color: #5340ff;
  align-content: space-around;
}

Perfect center

Jika ingin buat box tepat berada di tengah container baik secara horizontal dan vertikal, maka gunakan justify dan align secara bersamaan.

.flex{
  display: flex;
  flex-wrap: wrap;
  background-color: #5340ff;
  justify-content: center;
  align-items: center;
}

Mengatur box child

display:flex diatur di container box atau di kotak terluar yang menjadi tempat box-box kecil di dalamnya.

Kita bisa flex dari tiap box tersebut, dengan property:

align-self

align-self, merewrite pengaturan align dari container box

<style>
.kotak_flex1 {
  display: flex;
  background-color: #5340ff;
  margin-bottom:30px;
  height: 200px;
}

.kotak_flex1 > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}
</style>
<div class="kotak_flex1">
  <div style="align-self: center">1</div>
  <div>2</div>
  <div>3</div>  
</div>

order

order, mengatur urutan box

<div class="kotak_flex1">
  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div>
  <div style="order: 1">4</div>
</div>

flex

flex, mengatur ukuran box item. Nilainya gabungan dari flex-grow, flex-shrink, dan flex-basis (nilainya berurutan)

<div class="kotak_flex1">
  <div>1</div>
  <div>2</div>
  <div style="flex: 0 0 200px">3</div>
  <div>4</div>
</div>

flex-basis, mengatur panjang box item

flex-shrink, ukuran box akan menyusut kecil / besar berdasarkan sisa container

flex-grow, mengatur ukuran box secara spesifik dengan skala