Display: Flex

display: flex adalah nilai CSS yang menjadikan elemen sebagai flex container dan memungkinkan pengaturan layout yang fleksibel dan responsif. Flexbox mempermudah penataan elemen, baik secara horizontal maupun vertikal, dengan fitur pengaturan otomatis, perataan, distribusi ruang, dan skala elemen.

Berikut penjelasan mendetail mengenai properti utama yang digunakan dengan display: flex:

1. display: flex

Mengubah elemen menjadi flex container, sehingga semua anak di dalamnya menjadi flex items. Ini membuat elemen anak bisa diatur dengan properti Flexbox.

2. flex-direction

Properti ini menentukan arah tata letak elemen anak dalam flex container. Nilainya meliputi:

  • row: Elemen disusun secara horizontal dari kiri ke kanan (default).
  • row-reverse: Elemen disusun secara horizontal dari kanan ke kiri.
  • column: Elemen disusun secara vertikal dari atas ke bawah.
  • column-reverse: Elemen disusun secara vertikal dari bawah ke atas.

3. justify-content

Properti ini mengatur perataan elemen di sepanjang sumbu utama (main axis):

  • flex-start: Elemen diletakkan di awal kontainer.
  • flex-end: Elemen diletakkan di akhir kontainer.
  • center: Elemen dipusatkan di tengah kontainer.
  • space-between: Ruang di antara elemen dibagi rata, dengan elemen pertama dan terakhir ditempatkan di ujung kontainer.
  • space-around: Memberi ruang di sekitar elemen, tetapi ruang di antara elemen dua kali lebih besar daripada ruang di tepi luar.
  • space-evenly: Membagi ruang secara merata, baik di antara maupun di tepi elemen.

4. align-items

Mengatur perataan elemen anak di sepanjang sumbu silang (cross axis):

  • flex-start: Elemen ditempatkan di bagian atas kontainer.
  • flex-end: Elemen ditempatkan di bagian bawah kontainer.
  • center: Elemen disejajarkan di tengah kontainer.
  • baseline: Elemen disejajarkan berdasarkan garis dasar teks.
  • stretch: Elemen diperluas untuk mengisi seluruh tinggi kontainer (jika tanpa tinggi spesifik).

5. flex-wrap

Mengatur apakah elemen anak akan membungkus atau tidak jika ukuran kontainer lebih kecil dari jumlah elemen:

  • nowrap: Semua elemen anak tetap berada dalam satu baris (default).
  • wrap: Elemen akan dibungkus ke baris berikutnya jika ruang tidak cukup.
  • wrap-reverse: Sama seperti wrap, tapi urutan elemen dibalik.

6. align-content

Mengatur perataan baris ketika elemen membungkus lebih dari satu baris:

  • flex-start: Baris ditempatkan di awal kontainer.
  • flex-end: Baris ditempatkan di akhir kontainer.
  • center: Baris dipusatkan di tengah kontainer.
  • space-between: Baris didistribusikan secara merata dengan ruang di antaranya.
  • space-around: Memberikan ruang di sekitar baris.
  • stretch: Setiap baris akan diperluas untuk mengisi seluruh tinggi kontainer.

7. Properti pada Elemen Anak (Flex Item)

  • flex-grow: Menentukan seberapa besar elemen akan tumbuh untuk memenuhi ruang yang tersedia. Misalnya, jika flex-grow diatur ke 1, elemen akan tumbuh untuk mengisi ruang yang tersisa.
  • flex-shrink: Menentukan seberapa besar elemen akan menyusut ketika ruang terbatas. Nilai 1 membuat elemen menyusut, sedangkan 0 akan mempertahankan ukurannya.
  • flex-basis: Menentukan ukuran dasar elemen sebelum ruang tambahan didistribusikan. Ini bisa berupa ukuran absolut (px, %, dsb) atau auto.
  • align-self: Mengatur perataan elemen secara individual, menimpa align-items untuk elemen tersebut. Nilainya sama seperti align-items.