Flexbox: Properti Pada Container

Properti Flex Container

1. display: Menentukan apakah elemen HTML menjadi flex container. Ini dapat berupa inline atau block, tergantung pada nilai yang digunakan.

   .container {
     display: flex | inline-flex;
   }

2. flex-direction: Menetapkan sumbu utama (main-axis), yang menentukan arah penempatan flex items di dalam flex container.

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

3. flex-wrap: Biasanya, flex items akan mencoba untuk muat ke satu baris. Properti ini mengubah perilaku tersebut, memungkinkan flex items untuk membungkus ke baris baru ketika lebar terlalu kecil.

   .container {
     flex-wrap: nowrap | wrap | wrap-reverse;
   }

4. flex-flow: Kombinasi dari flex-direction dan flex-wrap, yang bersama-sama menentukan sumbu utama dan lintasan lintasan flex container. Nilai defaultnya adalah row nowrap.

   .container {
     flex-flow: {flex-direction} | {flex-wrap};
   }

5. justify-content: Mendefinisikan cara penyejajaran flex items sepanjang main axis. Membantu mendistribusikan ruang putih tambahan.

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

6. align-items: Menentukan bagaimana flex items harus disusun sepanjang cross-axis.

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

7. align-content: Mengatur batas internal flex container saat ada ruang putih tambahan di cross-axis. Tidak mempengaruhi konten saat hanya ada satu baris.

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

Properti-properti ini memberikan kendali yang kuat atas tata letak dan perilaku flex container serta flex items di dalamnya. Pastikan untuk menyesuaikan nilai-nilai properti ini sesuai dengan kebutuhan desain dan tata letak Anda.