Label

Css Flexbox

1 mei 2023

Css Flexbox

Flexbox

Flexbox merupakan layout tata letak untuk mengatur dan menentukan posisi element pada suatu website. Flexbox cukup banyak di gunakan sebagai komposisi mendesain website.

Persiapan

Untuk mulai membuat Flexbox hal yang pertama kita harus siapkan elemen html terlebih dahulu.

Html 
<div class="container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Contoh :
Properti flex

Selanjutnya Kita akan mulai membuat Css nya untuk menggaya elemen html menjadi Flexbox. buat selector Css dengan nama .container{}

Lalu buat properti display dengan nilai flex untuk menggaya Item menjadi Flexbox.

Css 
.container {
 display: flex;
}

Contoh :
  • Nilai flex Membuat setiap Item yang menyusun menjadi berbaris.
Properti flex-direction

Properti flex-direction mengatur urutan elemen.

Css 
.container {
 flex-direction: row | row-reverse | column | column-reverse;
}

Contoh :
  • Nilai row menentukan urutan default dari kiri ke kanan.
  • Nilai row-reverse merubah urutan sebaliknya dari kanan ke kiri.
  • Nilai column menentukan urutan normal namun merubah tata letak susunan menjadi dari atas ke bawah.
  • Nilai column-reverse menentukan urutan sebaliknya yang di mulai dari bawah ke atas.
Properti flex-wrap

Properti flex-wrap dengan memiliki 3 nilai utama yaitu no-wrap, wrap, wrap-reverse

Css 
.container {
 flex-wrap: no-wrap | wrap | wrap-reverse;
 }

Contoh :
Properti justify-content

Properti justify-cintent dengan 6 nilai.

Css 
.container {
 justify-content: flex-start | flex-end | center | space-between | space-around| space-evenly;
}

Contoh :
  • Nilai flex-start membuat 3 elemen Item berada di posisi kiri.
  • Nilai flex-end membuat 3 elemen Item berada di posisi kanan.
  • Nilai center membuat 3 elemen Item berada di posisi tengah.
  • Nilai space-between membuat 3 elemen Item berada di posisi tengah dan rata kiri kanan.
Properti align-content

Properti align-content

Css 
.container {
 align-content: flex-start | flex-end | center | stretch | space-between | space-around;
}

Contoh :
Properti align-items

Properti align-items

Css 
.container {
 align-items: flex-start | flex-end | center | stretch | baseline;
}

Contoh :
Label