Flexbox: Properti Item

Properti Flex Item

1. order: Menentukan urutan flex item dalam kontainer. Secara default, item disusun berdasarkan urutan dalam kode HTML.

   .item {
     order: {integer};
   }

2. flex-grow: Menentukan seberapa banyak flex items akan berkembang relatif terhadap yang lain. Nilai ini menunjukkan proporsi seberapa banyak ruang yang tersedia di dalam kontainer flex yang harus diambil oleh setiap item.

   .item {
     flex-grow: {number};  // default = 0
   }

3. align-self: Memungkinkan item untuk mengatur penyejajaran mereka sendiri, menggantikan penyejajaran default dari flex container.

   .item {
     align-self: auto | flex-start | flex-end | center | baseline | stretch;
   }

4. flex-shrink: Menentukan seberapa banyak suatu flex item dapat menyusut jika perlu. Nilai ini menentukan tingkat keuletan item terhadap penyusutan.

   .item {
     flex-shrink: {number};
   }

5. flex-basis: Menentukan ukuran default suatu elemen sebelum sisa ruang didistribusikan. Ini bisa berupa panjang atau kata kunci seperti 'auto' atau 'content'.

   .item {
     flex-basis: {length} | auto;
   }

6. flex: Singkatan untuk flex-grow, flex-shrink, dan flex-basis dalam satu deklarasi. Parameter kedua dan ketiga opsional.

   .item {
     flex: none | [ {flex-grow} {flex-shrink} || {flex-basis}];
   }

Properti-properti ini memberikan pengendalian yang luas terhadap perilaku dan penampilan dari flex items di dalam kontainer flex. Sesuaikan nilai-nilai properti ini sesuai dengan kebutuhan desain Anda.