Mundarija:

CSS-da qanday qilib panjara tartibini yarataman?
CSS-da qanday qilib panjara tartibini yarataman?

Video: CSS-da qanday qilib panjara tartibini yarataman?

Video: CSS-da qanday qilib panjara tartibini yarataman?
Video: HTML CSS yordamida Responsive (Adaptiv) Web-Site Yaratish | To'liq darlik 2024, Aprel
Anonim

Keling, to'rtta muhim qadamni takrorlaymiz:

  1. Yaratmoq konteyner elementi va uni ko'rsatishini e'lon qiling: panjara ;.
  2. ni aniqlash uchun xuddi shu konteynerdan foydalaning panjara yordamida treklar panjara - shablon -ustunlar va panjara - shablon -satr xususiyatlari.
  3. Bola elementlarni konteyner ichiga joylashtiring.
  4. dan foydalanib oluk o'lchamlarini belgilang panjara - bo'shliq xususiyatlari.

Men CSS panjara tartibidan foydalana olamanmi?

Internet Explorer-dan tashqari, CSS Grid Layout Safari, Chrome, Opera, Firefox va Edge-da prefikssiz. Ushbu qo'llanmalarda batafsil tavsiflangan barcha xususiyatlar va qiymatlarni qo'llab-quvvatlash barcha brauzerlarda o'zaro ishlaydi. Bu shuni anglatadiki, agar siz bir oz yozsangiz Tarmoq tartibi Firefox-da kod bo'lsa, u Chrome-da xuddi shunday ishlashi kerak.

Bundan tashqari, Flexbox yoki griddan foydalanishim kerakmi? Ikkalasi ham flexbox va panjara ana shu kontseptsiyaga asoslanadi. Flexbox elementlarni bitta satrda yoki bitta ustunda joylashtirish uchun eng yaxshisidir. To‘r elementlarni bir nechta satr va ustunlarga joylashtirish uchun eng yaxshisidir. justify-content xossasi qo'shimcha joyning qanday bo'lishini aniqlaydi moslashuvchan -konteynerga tarqatiladi moslashuvchan -moddalar.

Xuddi shunday, 1fr nima?

1fr "elementdagi qolgan bo'sh joy" deyishning bir usuli bo'lgan bitta "kasr birlik" dir.

Flexbox grid nima?

Flexbox bir o'lchovli sxemalar uchun qilingan va To‘r ikki o'lchovli sxemalar uchun yaratilgan. Bu shuni anglatadiki, agar siz narsalarni bir yo'nalishda joylashtirayotgan bo'lsangiz (masalan, sarlavha ichidagi uchta tugma), undan foydalanishingiz kerak. Flexbox : Bu sizga CSS-dan ko'ra ko'proq moslashuvchanlikni beradi To‘r.

Tavsiya: