Qutilarni Flexbox bilan joylashtiring
Qutilar tartibsiz turibdi. Har darajada ularni to'g'ri joyga qo'yish uchun konteynerga display: flex va boshqa xossalarni yozasiz. Yozganingiz darrov jonli ko'rinadi.
Har bir Flexbox xossasini qutilar misolida jonli ko'ring: xossa qanday qiymatlarga ega va nima o'zgaradi. Keyin «Amaliyot» ga o'ting.
Hammasi shu yerdan boshlanadi
Konteynerga display: flex bersangiz, qutilar (flex-elementlar) bir qatorda yonma-yon tiziladi. Oddiy holatda ular ustma-ust turgan edi.
.maydon { display: flex; }
Ikki o'qni tushuning
Flexbox ikki o'q bilan ishlaydi: asosiy o'q (main), ya'ni qutilar tiziladigan yo'nalish (odatda gorizontal), va ko'ndalang o'q (cross), unga perpendikulyar. justify-content asosiy o'q, align-items ko'ndalang o'q bo'ylab joylaydi.
/* asosiy o'q -> justify-content */ /* ko'ndalang o'q v align-items */
Asosiy o'q bo'ylab
justify-content qutilarni asosiy o'q (gorizontal) bo'ylab joylaydi: flex-start (chapga), center (markazga), flex-end (o'ngga), space-between / space-around / space-evenly (orasiga bo'shliq).
justify-content: center; justify-content: space-between;
Ko'ndalang o'q bo'ylab
align-items qutilarni ko'ndalang o'q (vertikal) bo'ylab joylaydi: flex-start (tepaga), center (o'rtaga), flex-end (pastga), stretch (butun balandlikka cho'zadi).
align-items: center; align-items: flex-end;
Yo'nalishni o'zgartirish
flex-direction asosiy o'q yo'nalishini belgilaydi: row (qator, standart), column (ustun), va ularning -reverse teskari variantlari. Muhim: column da asosiy o'q vertikal bo'lib qoladi!
flex-direction: column; flex-direction: row-reverse;
Orasidagi bo'shliq
gap qutilar orasiga teng bo'shliq qo'yadi. margin bilan ovora bo'lmaysiz, bitta qator yetarli.
gap: 16px;
Sig'masa, keyingi qatorga
Standart holatda qutilar bir qatorga siqiladi. flex-wrap: wrap bersangiz, sig'magani keyingi qatorga o'tadi. Moslashuvchan (responsive) tarmoq shunday quriladi.
flex-wrap: wrap;
Bo'sh joyni egallash
flex-grow qutining (elementning) xossasi. Qiymati 1 bo'lsa, u bo'sh joyni egallab kengayadi. Boshqalar o'z o'lchamida qoladi.
.quti2 { flex-grow: 1; }
Tartibni o'zgartirish
order qutining xossasi. HTML ni o'zgartirmasdan, uning ko'rinish tartibini boshqaradi. Kichik qiymat oldinda, katta qiymat orqada turadi (standart 0).
.quti1 { order: 2; }
Bitta quti uchun istisno
align-self qutining xossasi. Konteynerning align-items qoidasini faqat shu quti uchun bekor qiladi. Bittasini boshqacha joylashtirmoqchi bo'lsangiz.
.quti2 { align-self: flex-end; }
Tayyormisiz? 🎯
Endi bilimni sinab ko'ring: 20 darajali amaliyotda kod yozib qutilarni uyiga qo'yasiz.
Ajoyib!
Qutilar joyiga tushdi.