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.

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

"Flexsbox" xossasi bilan yana bir nechta amaliyotni bajaraylik. Sizning vazifangiz ushbu shaxmat doskasi dizaynini qayta yaratib chiqish:

Biz sizga boshlash uchun bir nechta kod parchalarini berdik, ammo barcha qutilarni yaratib, to‘g‘ri "CSS" qoidalarini qo‘shishingiz o‘zingizga bog‘liq.
Ushbu kod hozirgina oxirgi sahifada ko‘rib chiqqan kodimizga juda o‘xshaydi, shuning uchun bir joyda qo‘tib qolsangiz, har doim shu kodga qarab olishingiz mumkin (yoki quyida joylashgan yechim kodimizni ko‘ring).

45. Dizaynni takrorlash

Mashq: Dizaynni takrorlash
Quyidagi ish maydonida videoda ko‘rsatilgan "tic-tac-toe" doska dizaynini qayta yaratishga harakat qiling. Bundan tashqari, ish maydonining pastki qismida rasmning nusxasi mavjud.
Buning uchun "CSS" qoidalarini tictactoe.css fayliga qo‘shing. "HTML" faylini tahrirlashingiz umuman hojat yo‘q!
/* Add CSS rules here! */
ul{
width: 300px;
height: 300pt;
display: flex;
flex-wrap: wrap;
}
li{
width: 90px;
height: 90px;
font-size: 80px;
font-family: sans-serif;
background-color: lightblue;
margin: 5px;
list-style: none;
text-align: center;
}