Flexbox ni o'rganamiz (final part)

Child Elementlar (Items)

flex konteyner ichida joylashgan farzand elementlar avtomatik ravishda moslashuvchanlik xususiyatiga ega bo'ladi va ular flex element hisoblanadi.

order xususiyati.

order xususiyati flex elementlarning joylashish tartibni nazorat qilish uchun qo'llaniladi.

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

<div class="flex-container">

 <div style="order: 3">1</div>

 <div style="order: 2">2</div>

 <div style="order: 4">3</div>

 <div style="order: 1">4</div>

</div>

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. Bu xususiyatdan foydalanish unchun albatta tajriba qilib ko'ring.

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.

<div class="flex-container">

 <div style="flex-grow: 4">1</div>

 <div style="flex-grow: 1">2</div>

 <div style="flex-grow: 1">3</div>

</div>

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

<div class="flex-container">

 <div style="flex-shrink: 2">1</div>

 <div>2</div>

 <div>3</div>

 <div style="flex-shrink: 2">4</div>

</div>

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.

flex-basis xususiyati.

flex-basis xususiyati flex-elemtlarga boshlang'ich o'lcham berish ishlatiladi.

<div class="flex-container">

 <div>1</div>

 <div>2</div>

 <div style="flex-basis: 200px">3</div>

 <div>4</div>

</div>

Flex-elementga berilgan flex-basis qiymati elment uchun minimal o'lcham ham xisoblanadi.

flex xususiyati.

flex xususiyati flex-grow, flex-shrink va flex-basis xususiyatlarini bir vaqtning o'zida berish imkoniyatini beradi.

flex: flex-grow flex-shrink flex-basis - ketma-ketlikda bo'ladi.

Agar siz faqat bitta ya'ni flex: 1; qiymatini bersangiz bu flex-grow xususiyatiga tegishli bo'ladi.

align-self xususiyati

Bu xususiyat align-items xususiyatini flex-elementlar dagi individual aksi xisoblanadi. ya'ni alohida flex-element uchun vertikal joylashish imkonini beradi.

<div class="flex-container">

 <div>1</div>

 <div>2</div>

 <div style="align-self: center">3</div>

 <div>4</div>

</div>

Qiziq tomoni shundaki bu xususiyat align-items xususiyati qiymatini bekor qiladi.

E'tiboringiz uchun raxmat!

<- Avvalgi qismga o'tish

Manba:

w3schools.com

developer.mozilla.org

Firk va mulohazalar uchun :

Web development

Amirov Qodir