Mavzu: css flexboxda Flex Items xususiyatlari: order, flex-grow, flex-shrink, flex-basis, flex, align-self

HTML(siz foydalanganingizda stillar css faylda child-elementlarga yozishingiz qulayroq)

• HTML(siz foydalanganingizda stillar css faylda child-elementlarga yozishingiz qulayroq)
• 1
• 2
• 3
• 4
• CSS (keyingi misollada ham container elementga xuddi shunday css stillar yozilgan bo'ladi).
• .flex-container {
• display: flex;
• }
• Elementlarda jimlik xolati bo'yicha order xususiyati 0 qiymatiga teng bo'ladi va berilgan qiymatlar kattaligi bo'yicha chapdan tartiblab boriladi. Qiymat sifatida faqat raqamlar qabul qilinadi.

flex-grow xususiyati.

• flex-grow xususiyati flexboxning elementlar o'rtasida joy taqsimlashning ajoyib echimlaridan biri xisoblanadi. Bunda konteyner hajmi elementlar orasida bir biriga nisbatan taqsimlash imkoniyatini beradi.

flex-grow xususiyati.

1

2

3

flex-grow ning qiymati raqamlarda ifodalanadi va jimlik xolatidagi qiymati 0 bo'ladi. Hisoblash: Yuqoridagi misolda masofa quyadigacha xisoblangan 4+1+1=6, 6 dan 4 qism birinchi elementga va 1 qismdan qolgan elementlarga berilgan. Kattalik ixtiyor qiymat bo'lishi mumkin. Odatda jami miqdor 12 ga teng yoki kichik bo'lgani maqul.

flex-shrink xususiyati

• flex-shrink xususiyati browser oynasi kichrayganda qaysi element o'lchami qisqarishini nazorat qilish uchun ishlatiladi.

HTML

• HTML
• 1
• 2
• 3
• 4
• CSS
• .flex-container>div {
• margin: 10px;
• width: 400px;
• }
• Yuqoridagi misolda 2 va 3 elementlar oyna o'lchamidan qat'iy nazar width: 400px; o'lchamini saqlab qoladi. flex-shrink jimlik xolatda 1 qiymatida bo'ladi va faqat raqamli qiymatlar qabul qilinadi.