Animal Trading cards

42. Amaliy mashg‘ulot — "Flexbox" xossasi (1/2)

"Flexbox"dan foydalanganda konteyner elementining kattaligi uning ichidagi qutilarning tartibiga qanday ta’sir qilishini tushunish kerak.

Kelli taqdim qilgan kodda .container klasining kengligi 100% deb belgilanganligini sezgan bo‘lishingiz mumkin. Bu shuni anglatadiki, konteyner kengligi ichidagi element(lar) kengligiga qarab kengayadi va torayadi - ushbu vaziyatda konteyner sahifaning body elementi ichida joylashgan bo‘lib, u sahifaning to‘liq kengligini oladi.

Buni yaxshiroq ko‘rib tushunish uchun `.container' nomli klasga ega elementga chegara(border) qo‘shishimiz mumkin.

Quyidagi ish maydoniga .container klassiga border:5px solid black xossa va uning qiymatlarini qo‘shing.

Endi konteyner elementining hajmini ko‘rib turganimizdan keyin, keling uning kengligini o‘zgartirishga harakat qilaylik.

1-savol

Ayni paytda kenglik 100% deb belgilangan. Uni 200px(pikselga) o‘zgartiring (200px). Nima o‘zgarish kuzatdingiz?

Izoh:

Ko‘rib turganingizdek, flex-wrap:wrap; xossasi konteyner element juda ham torayib ketganida ichiki qutilarni ikkinchi qatorga tushib qolishiga sabab bo‘ladi.