Properti Flexbox

Flexbox merupakan salah satu layout mode pada CSS yang memungkinkan Anda untuk mengatur elemen di dalam container dengan lebih fleksibel dan responsif. Flexbox memiliki beberapa properti yang berguna untuk mengatur tata letak elemen, di antaranya:

1. justify-content

Properti justify-content digunakan untuk mengatur penjajaran item-item flex pada sumbu utama (main axis). Sumbu utama ini ditentukan oleh properti flex-direction. Berikut beberapa nilai justify-content yang umum digunakan:

flex-start: Menjajar item di awal sumbu utama.

flex-end: Menjajar item di akhir sumbu utama.

center: Menjajar item di tengah sumbu utama.

space-between: Mendistribusikan item secara merata dengan ruang yang sama di antara item.

space-around: Mendistribusikan item secara merata dengan ruang yang sama di antara item dan di tepi container.

space-evenly: Mendistribusikan item secara merata dengan ruang yang sama di antara item, tetapi tanpa ruang di tepi container.

contoh

CSS

.container {
  display: flex;
  justify-content: space-around;
}

.container .item {
  width: 100px;
  height: 100px;
  background-color: #ccc;
}

Hasil :

+--------------------------------±
|  Item 1  |  Item 2  |  Item 3  |
+--------------------------------+

2. align-items

Properti align-items digunakan untuk mengatur penjajaran item-item flex pada sumbu lintang (cross axis). Sumbu lintang ini tegak lurus terhadap sumbu utama. Berikut beberapa nilai align-items yang umum digunakan:

flex-start: Menjajar item di awal sumbu lintang.

flex-end: Menjajar item di akhir sumbu lintang.

center: Menjajar item di tengah sumbu lintang.

baseline: Menjajar item berdasarkan baseline teks.

stretch: Membentangkan item untuk mengisi seluruh ruang yang tersedia pada sumbu lintang.

Contoh

  CSS
  
  .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.container .item {
  width: 100px;
  height: 50px;
  background-color: #ccc;
}

Hasil

  +-----------------+
  |  Item 1  |
  |  Item 2  |
  |  Item 3  |
  +-----------------+
  

flex-direction

Properti flex-direction digunakan untuk menentukan arah sumbu utama dan sumbu lintang pada container flexbox. Berikut beberapa nilai flex-direction yang umum digunakan:

row: Mengatur sumbu utama horizontal (dari kiri ke kanan) dan sumbu lintang vertikal (dari atas ke bawah). Ini adalah nilai default.

row-reverse: Mengatur sumbu utama horizontal (dari kanan ke kiri) dan sumbu lintang vertikal (dari atas ke bawah).

column: Mengatur sumbu utama vertikal (dari atas ke bawah) dan sumbu lintang horizontal (dari kiri ke kanan).

column-reverse: Mengatur sumbu utama vertikal (dari bawah ke atas) dan sumbu lintang horizontal (dari kiri ke kanan).

Contoh

CSS 

.container1 {
  display: flex;
  flex-direction: row;
}

.container2 {
  display: flex;
  flex-direction: column;
}

.container .item {
  width: 100px;
  height: 50px;
  background-color: #ccc;
}

Hasil

Container 1

+------------------------------------±
|  Item 1  |  Item 2  |  Item 3  |
+------------------------------------+

Container 2
+------------------------------------+
|  Item 1  |
|  Item 2  |
|  Item 3  |
+------------------------------------+

Properti-properti flexbox ini dapat dikombinasikan untuk menghasilkan tata letak yang beragam dan fleksibel. Anda dapat bereksperimen dengan nilai-nilai yang berbeda untuk mencapai hasil yang diinginkan.